Садржај
Користећи ЦСС код, можете да генеришете пругасту позадину за веб страницу без употребе графике. Овај ефекат користи нивое ЦСС градијента са вишеструким прекидима боја, као и својство величине позадине да би се вектор градијента поновио преко екрана. Најбољи начин да то урадите је да почнете са солидном бојом позадине и направите једну од ваших транспарентних трака за боју која ће бити истакнута. Корисници који посете вашу страницу користећи старе интернет претраживаче видеће солидне боје.
Упутства
-
Отворите ЦСС стиле схеет датотеку у Нотепаду или у програму за едитовање кода. Додајте ово правило на крај датотеке:
хтмл {висина: 100%; }
Ово правило омогућава да се комплетна позадина веб странице попуни градијентном траком коју ће креирати.
-
Поставите боју позадине за своју страницу у "хтмл {}" да бисте обезбедили основну боју за траке и подразумевано за старе прегледаче:
хтмл {висина: 100%; боја позадине: црна; }
-
Додајте следећи код у подразумевани "хтмл {}" да бисте направили ефекат хоризонталне пруге:
бацкгроунд-имаге: линеарни градијент (транспарентни 50%, бели 50%);
Он ће створити два прекида у боји, први ће бити транспарентан, а други бели. Сваки прекид боје заузима 50% простора на градијенту на екрану. Подесите ширину трака променом процентуалних вредности.
-
Додајте вредност од нуле до првог прекида боје и одвојите је зарезом:
Бацкгроунд-имаге: линеар-градиент (0, транспарент 50%, блацк 50%);
Ово ће положити ваше пруге вертикално, уместо да их поставите хоризонтално.
-
Дуплицирајте својство бацкгроунд-имаге и његове вредности у новој линији. Урадите ово два пута, креирајући три линије са истим кодом. Додајте префикс "-моз" линеарном градијенту у једну од дуплих линија кода. Додајте префикс "-вебкит" другој линији дупликата:
бацкгроунд-имаге: линеар-градиент (0, транспарент 50%, вхите 50%); бацкгроунд-имаге: -моз-линеар-градиент (0, транспарентно 50%, бело 50%); бацкгроунд-имаге: -вебкит-линеар-градиент (0, транспарент 50%, белиј 50%);
-
Ограничите градијент на одређену количину пиксела тако што ћете поставити величину позадине у следећем реду у ЦСС коду:
бацкгроунд-сизе: 20пк;
Промените број пиксела величине позадине да бисте изменили величину градијента. Због константног понављања градијента ширине странице, свако понављање ће одговарати скупу пруга на екрану.
Упутства
Обавештење
- Неки старији претраживачи не подржавају ЦСС3 градијенте. Када желите да прикажете пруге за све типове претраживача, користите условне коментаре да бисте укључили стилску табелу са понављајућом графиконом.