Градиенты CSS

Градиенты CSSСовсем недавно, в статье Градиентная заливка с помощью 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 — это уникальное массажное оборудование, которое с помощью определённой частоты и силы надавливания повторяет методы массажа Древнего Китая.



Запись опубликована в рубрике CSS3 с метками , , . Добавьте в закладки постоянную ссылку.

4 комментария: Градиенты CSS

  1. Уведомление: Градиенты CSS | Grabr

  2. Уведомление: 10 приемов CSS3, которые можно и нужно использовать | RusDigi.org Блог Гилязетдинова Руслана

  3. Уведомление: Градиентная заливка с помощью CSS3 | RusDigi.org Блог Гилязетдинова Руслана

  4. Уведомление: Московские терминалы начали сносить | Авто и мотоновости

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *