CSS көмегімен техниканы орындаңыз
Веб-сайтты жобалаған болсаңыз, веб-бетте тіркелген фон суреті немесе су таңбасын жасауды үйрену қызықтыруы мүмкін. Бұл жалпыға танымал онлайн режимінде дизайн болып табылады. Бұл веб-дизайнерлік қапшықтардағы қолжазбалардағы ыңғайлы әсер.
Егер сіз бұны бұған дейін жасамаған болсаңыз немесе әлдеқайда сәттілікпен көрмеген болсаңыз, процесс үрейлі болып көрінуі мүмкін, бірақ бұл өте қиын емес. Осы қысқаша оқулықпен сіз CSS-ді қолдану арқылы бірнеше минут ішінде техниканы меңгеру үшін қажетті ақпаратты аласыз.
Басталу
Фондық суреттер немесе су белгілері (шын мәнінде өте жеңіл фондық суреттер) басылған дизайндағы тарихы бар. Құжаттар көшірмелерін болдырмау үшін ұзақ уақыт бойы су белгілерін енгізді. Сонымен қатар, көптеген брошюралар мен брошюралар басып шығару үшін дизайн бөлігі ретінде үлкен фондық суреттерді пайдаланады. Веб-дизайнда басып шығарылған және өңдік суреттерден алынған ұзақ стильдер бар, олар қарызға алынған стилдердің бірі.
Бұл үлкен фондық суреттер келесі үш CSS мәнерінің қасиеттерін пайдалану арқылы жасауға оңай:
- background-image
- фон-қайталау
- background-attachment
- фон-өлшемі
Фонды-сурет
Су таңбаңыз ретінде қолданылатын кескінді анықтау үшін фон-кескінді қолданасыз. Бұл стиль жай ғана сіздің сайтыңыздағы суретті жүктеу үшін «суреттер» деп аталатын каталогта файл жолын пайдаланады.
background-image: url (/images/page-background.jpg);
Кескіннің өзі қалыпты бейнеге қарағанда ашық немесе мөлдір болуы маңызды. Бұл «су белгісі» көрінісін жасайды, онда жартылай мөлдір сурет мәтіннің, графиканың және веб-парақтың басқа да негізгі элементтерінің артында жатыр. Бұл қадамсыз фондық сурет сіздің бетіңіздегі ақпаратпен бәсекелеседі және оны оқуды қиындатады.
Adobe Photoshop сияқты кез-келген редакциялау бағдарламасында өңдік кескінді реттеуге болады.
Фонды - қайталау
Фондық-қайталау сипаты келесіде пайда болады. Егер суретіңіз үлкен су таңбалы стиль графикасы болса, бұл сипатты бұл суретті тек бір рет көрсету үшін қолданасыз.
background-repeat: қайталаусыз;
«Қайталанбайтын» сипатсыз, әдепкі бойынша, кескін бетте қайта-қайта қайталанады. Бұл көптеген заманауи веб-бет дизайндарында жағымсыз, сондықтан бұл стиль сіздің CSS-де маңызды деп саналуы тиіс.
Фонды-тіркеме
Фон-тіркеме - көптеген веб-дизайнерлер ұмытып кеткен қасиет. Оның көмегімен «тіркелген» сипатты пайдаланғанда фондық суретті орнына бекітеді. Бұл суретті беттегі су белгілеріне айналдырады.
Бұл сипаттың әдепкі мәні - «айналдыру». Егер фондық-тіркеме мәнін көрсетпесеңіз, фон беттің қалған бөлігімен бірге жылжиды.
background-attachment: тіркелген;
Фон-өлшемі
Фон мөлшері - жаңа CSS сипаты. Ол сізге қаралған терезеге негізделген фон мөлшерін орнатуға мүмкіндік береді. Бұл әртүрлі құрылғылардағы әр түрлі өлшемдерде көрсетілетін жауап беретін веб-сайттарға өте пайдалы.
background-size: қақпақ;
Бұл сипатта қолдануға болатын екі пайдалы мән:
- Cover - Фонды толық ені немесе толық биіктігі көрсетіледі. Бұл суреттің кейбір бөліктері экранда көрінбеуі мүмкін, бірақ бүкіл аумақ жабылады.
- Контейнер - кескінді масштабтау , бүкіл ені мен биіктігі стильдегі аймақта көрсетіледі. Кескін кесілген жоқ, бірақ жағымсыз аймақтың бөліктері кескінмен жабылмауы мүмкін.
CSS-ге өзіңіздің бетіңізге қосу
Жоғарыда көрсетілген қасиеттерді және олардың мәндерін түсінгеннен кейін, осы мәнерлерді веб-сайтыңызға қосуға болады.
Бір беттік сайт жасасаңыз, төмендегі ақпаратты веб-беттің HEAD бөліміне қосыңыз. Егер сіз көп бетті сайт жасасаңыз және сыртқы парақтың қуатын пайдаланғыңыз келсе сыртқы стиль кестесінің CSS мәнерлеріне қосыңыз.