Совсем недавно, в статье Градиентная заливка с помощью CSS3 я приводил парочку примеров работы линейного градиента. Мы тогда так и не коснулись вопроса радиального градиента. Сегодня я хотел бы дать немного больше информации о градиентах CSS. На данный момент градиенты поддерживаются браузерами Internet Explorer 8+, Firefox, Safari и Chrome и мы можем с уверенностью применять их на наших сайтах. Давайте подробнее рассмотрим градиенты CSS: их синтаксис и поддержку браузерами.
Посмотреть демо
О градиентах
Градиент, по сути, это плавный переход из одного цвета в другой. Градиенты бывают двух видов: линейный (linear) и радиальный (radial). Хоть градиенты и являются графическими элементами, их достаточно легко создавать с помощью CSS. Спецификация CSS3 привнесла CSS градиенты, но их реализация слишком затянулась.
Линейный градиент CSS
Синтаксис линейного градиента разный для каждого браузера, но есть стандартный:
background-image: linear-gradient( || ,]? , [, ]* )
Первый параметр это точка с которой нужно начать градиентную заливку или угол в градусах. Далее идут параметры задающие цвета используемые в градиенте, называемые «color stops». Минимальным является задание двух цветов, но вы можете задать и больше. Цвет может быть задан только одним параметром либо может быть задан цветом и значением в процентах:
/* старый вариант: color-stop(проценты,цвет) */
color-stop(0.20,red)
/* текущий вариант: цвет _ проценты */
#dea222 20%
Как и в случае со многими новыми свойствами CSS3 каждый браузер имеет собственный синтаксис для градиента. Вот такой сниппет покрывает все возможные браузеры для простого линейного градиента сверху вниз:
#example1 {
/* если градиент не поддерживается - сплошная заливка */
background-color:#063053;
/* chrome 2+, safari 4+;*/
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);
/* firefox;*/
background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
/* ie10 */
background-image: -ms-linear-gradient(#063053,#395873,#5c7c99);
/* opera 11.1 */
background-image: -o-linear-gradient(#063053,#395873,#5c7c99);
/* "стандарт" */
background-image: linear-gradient(#063053,#395873,#5c7c99);
}
Заметьте, что в самом начале мы указываем простую одноцветную заливку, на тот случай если градиентная заливка браузером не поддерживается. CSS градиент возможно задать и с помощью углов вместо обычных направлений (верх, низ). Синтаксис будет выглядеть следующим образом:
#example2 {
/* если градиент не поддерживается - сплошная заливка */
background-color:#063053;
/* chrome 2+, safari 4+;*/
background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg,#063053,#395873,#5c7c99);
/* firefox;*/
background-image:-moz-linear-gradient(45deg,#063053,#395873,#5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg,#063053 0%,#395873 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg,#063053,#395873);
/* "стандарт" */
background-image: linear-gradient(45deg,#063053,#395873);
}
Ну и сделаем теперь градиент с несколькими цветами — имитируем радугу:
/* example 3 */
#example3 {
/* если градиент не поддерживается - сплошная заливка */
background-color:#063053;
/* chrome 2+, safari 4+; */
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(red,green,blue,purple,orange);
/* firefox; */
background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);
/* ie10 */
background-image: -ms-linear-gradient(red,green,blue,purple,orange);
/* opera 11.1 */
background-image: -o-linear-gradient(red,green,blue,purple,orange);
/* "стандарт" */
background-image: linear-gradient(red,green,blue,purple,orange);
}
Немного о поддержке градиента браузером Internet Explorer. Синтаксис с использованием filter и -ms-filter является приоритетным по сравнению с новым
-ms-linear-gradient. Лучшим вариантом является использование условных комментариев для IE, что в итоге позволит создать градиент, который будет надежно работать в этом «браузере»:
Далеко от идеала, но хоть что-то.
Радиальный градиент CSS
Радиальные градиент совсем не похожи на линейные. Линейные градиенты начинаются в определенной точке и движутся в направлении другой точки. Радиальный же градиент начинается в центре и движется в направлении от нее на 360 градусов. Радиальные градиенты на данный момент не поддерживаются Internet Explorer, а браузеры которые поддерживают радиальный градиент имеют разный синтаксис описания этого свойства.
Начнем с WebKit браузеров — Chrome, Safari и др. Webkit как всегда впереди планеты всей и имеет на данный момент «текущий-который-будет-унаследован» синтаксис для радиального градиента:
/* простой вариант */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* использование color stops */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange));
Совсем недавно WebKit анонсировали новый синтаксис для радиального градиента, который очень похож на синтаксис Firefox’a:
radial-gradient( [ || ,]? [ || ,]? , [, ]*)
Такой синтаксис будет отлично работать в Firefox 4 и WebKit браузерах. Существует так же несколько констант для параметра size:
closest-side: Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse);closest-corner: Ближайший угол. Градиент распространяется от центра к ближайшему углу элемента;farthest-side: Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоии, горизонтальной и вертикальной, сторонам (для ellipse);farthest-corner: Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента;contain: синонимclosest-side;cover: синонимfarthest-corner.
Простой вариант применения радиального градиента будет выглядеть так:
#example4 {
background-image: -moz-radial-gradient(orange, red);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* старый синтаксис */
background-image: -webkit-radial-gradient(orange, red); /* новый синтаксис */
background-image: radial-gradient(orange, red);
}
Заметьте, что применение параметра size необязательно. Здесь мы создаем простой градиент с двумя цветами. При желании мы можем использовать несколько цветов и задавать их с помощью color stop'ов. Для примера создадим радугу из цветов:
#example5 {
background-image: -moz-radial-gradient(red,green,blue,purple,orange);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* старый синтаксис */
background-image: -webkit-radial-gradient(red,green,blue,purple,orange); /* новый синтаксис */
background-image: radial-gradient(red,green,blue,purple,orange);
}
И еще один пример радиального градиента с использованием параметра size:
#example6 {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
В данных примерах используются hex названия цветов и пиксели как единицы измерения. Вы же можете использовать любые варианты для задания цвета (RGB, RGBa и др.) и любые единицы измерения.
Градиенты CSS: советы
- Хотите прозрачности — используйте RGBa модель задания цвета.
- Всегда используйте сплошную заливку перед определением градиента, чтобы посетители, у которых отсутствует поддержка градиентов увидели нужный цвет. Другой вариант — сделайте скриншот градиента с помощью браузера, который его правильно отображает и поместите изображение в конструкцию с условными операторами для IE.
- Firefox и WebKit браузеры поддерживают конструкцию с префиксом
repeating-linear-gradientиrepeating-radial-gradient. Вот пример:#example7 { background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px); background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px); } - Если вам критично использование градиента, попробуйте использовать Dojo’s GFX библиотеку, которая позволяет создавать векторную графику. GFX также позволяет создавать радиальные градиенты, которые прекрасно отображаются в Internet Explorer.
Посмотреть демо
Заключение
Градиенты CSS это еще один шаг в эволюции CSS3, смешивающий программирование и дизайн. Теперь, когда градиенты поддерживаются всеми современными браузерами, мы можем использовать их с большей уверенностью.
Фирма «Вендрест» с удовольствием представляет вашему вниманию Массажер воротник
SL D27 — это уникальное массажное оборудование, которое с помощью определённой частоты и силы надавливания повторяет методы массажа Древнего Китая.
4 комментария для “0”