СSS градиенты

В этой статье мы узнаем, как создавать градиенты с помощью CSS3.
Вообще возможность создавать градиенты с использованием только CSS появилась достаточно давно. Но в виду того, что эту возможность нельзя назвать кросс-браузерной (одинаковая реализация во всех браузерах) , она до сих пор мало используется. Но мир не стоит на месте и все больше браузеров позволяют использовать css3 градиенты в своей работе. Они прекрасно работают в Safari, Chrome и Mozilla Firefox (с версии 3.6).
Прочитав эту статью Вы также узнаете, как их использовать и в более старых версиях Firefox и IE (!!!!!)

Плюсы использования CSS3 градиентов?

1. Вам не нужен Photoshop! Ничего рисовать не надо. Лишь задать нужные параметры в CSS
2. Нет лишних изображений, а значит Ваш сайт будет грузиться быстрее
3. Использование CSS3 показывает Ваш профессионализм и качество Вашего сайта

Firefox синтаксис

Code-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Webkit синтаксис

Code-webkit-linear-gradient-webkit-radial-gradient

Пример использования в IE

Codefilter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#6191bf, endColorstr=#cde6f9); /* IE6 & IE7 */
-ms-filter: «progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#6191bf, endColorstr=#cde6f9)»; /* IE8 */

Кросс-браузерный CSS линейный градиент

А теперь давайте посмотрим на работающий градиент 
СSS градиенты 
ДемоCode
background: #6191bf; /* Задаем цвет фона для браузеров, не поддерживающих CSS3*/  
background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9); /* Firefox 3.6 */
background-image: -webkit-linear-gradient(#81a8cb, #cde6f9); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#cde6f9′); /* IE6 & IE7 */
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#cde6f9′)»; /* IE8 */

CSS3 радиальный градиент

К сожалению, IE не поддерживает угловой градиент и радиальный. Это означает, что можно использовать только горизонтальные и вертикальные линейные градиенты (см. выше) в два цвета, один для начала и один для конца.

Но давайте посмотрим, как вы можете определить CSS3 радиальный градиент для Firefox, Safari и Chrome.

СSS градиенты 

Демо

Codebackground: #6191bf; /* Fallback background color for non supported browsers */  

background-image: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #6191bf);
background-image: -webkit-radial-gradient(#cde6f9, #81a8cb);

Заключение

Хотя CSS3 градиенты открывают массу новых возможностей, не все браузеры их поддерживают. Поэтому при создании сайта нельзя полностью полагаться на них полагаться.
Вот и все. Обсуждение темы на форуме
Статья переведена с сайта: http://www.red-team-design.com/css-gradients-quick-tutorial

Комментарии на Facebook