До сега, задачата на картографиране на градиент фона на по-голямата част от програмисти решени чрез "podsovyvaniya" изображения за фон и повторение вертикално или хоризонтално, в зависимост от желания ефект.
Въпреки факта, че възможността за получаване на градиент на фоново изображение CSS означава, че има по-дълъг период от време, да се възползват от тази възможност не е много драго сърце. В действителност, много малко хора искат, особено по отношение на търговските проекти, измисли излишни проблеми в главата с оформление на различни браузъри. Особено, защото доскоро като Opera не поддържа CSS-Ню Йорк градиент.
Днес, нека разгледаме един пример за CSS код, който ви позволява да показвате вертикално двуцветен градиент. Между другото, Opera 11.10 версия вече поддържа градиент запълване на фона с CSS.
Кодът по-долу работи в най-разпространените браузъри: IE, Firefox, Opera, Chrome, Safari.
Добавете кода в стилове:
Сега анализираме какво е това, което:
На първия ред е ясно. Това е за браузъри, които не поддържат градиент функция.
Наблюдатели Chrome и Safari работи на Webkit платформа. Градиент на тяхната конструкция е описана -webkit-градиент (тип градиент отправна точка, крайната точка, първоначалния цвят, крайна цвят).
просто в Firefox, като "три рубли." Линеен градиент параметри, описани по структура: -moz-линейно-градиент (начална точка, започват цвят, край цвят).
С история Opera е същото като с на Firefox, дизайнът се характеризира с една буква: -o-линеен наклон (начална точка, първоначалният цвят, краен цвят).
Microsoft, както винаги се отличава със своята IE! Тук параметрите са определени чрез филтър градиент. И препратки към GradientType повече за като подигравка, защото в допълнение към gradientType = 0 вече не не работят. Най-малко това е в момента на писане на тази статия:
Този код трябва да покаже нормално вертикален градиент във всички модерни браузъри.
Подобни записи
Свързани статии