Градиенты CSS

Дата публикации: 2014-04-28

Градиенты CSS

От автора: В точности так, как вы можете объявить фон элемента в CSS сплошным цветом, точно так же можно объявить его градиентом. Для управления и производительности лучше подходит применение заявленных в CSS градиентов вместо использования файла изображения.

Градиенты обычно состоят из одного цвета, переходящего в другой, но в CSS можно контролировать каждый аспект этого процесса, от его направления до цветов (сколько угодно много) до того, где будет происходить изменение этих цветов. Давайте все из них рассмотрим.

Градиенты – это фоновое изображение

Тогда как объявления сплошного цвета использует свойство background-color в CSS, градиенты применяют background-image. Оно очень удобно по нескольким причинам, которые мы объясним позже. Условно обозначаемое свойство background поймет, что вы имеете в виду, если заявить из них что-то одно.

.gradient {
  /* можно использовать как альтернативный вариант */
  background-color: red;
  /* будет «поверх», если его поддерживает браузер */
  background-image: linear-gradient(red, orange);
  /* сделает сброс остальных свойств, как background-position, но понимает, что вы имеете в виду */
  background: red;
  background: linear-gradient(red, orange);
}

.gradient {

/* можно использовать как альтернативный вариант */

background-color: red;

/* будет «поверх», если его поддерживает браузер */

background-image: linear-gradient(red, orange);

/* сделает сброс остальных свойств, как background-position, но понимает, что вы имеете в виду */

background: red;

background: linear-gradient(red, orange);

}

Линейный градиент

Возможно, самый привычный и нужный вид градиента — linear-gradient(). Ось координат может идти слева направо, сверху вниз или под любым выбранным вами углом. Если не заявлять угол, то будет подразумеваться сверху вниз:

.gradient {
  background-image:
    linear-gradient(
      red, #f06d06
    );
}

.gradient {

background-image:

linear-gradient(

red, #f06d06

);

}

Разделенные запятыми цвета отображают обычно применяемый вами цвет: Hex, именованные цвета, rgba, hsla и т.д. Чтобы сделать градиент слева направо, передайте дополнительный параметр в начале функции linear-gradient(), начинающейся со слова to, означающем направление, например to right:

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, #f06d06
    );
}

.gradient {

background-image:

linear-gradient(

to right,

red, #f06d06

);

}

Синтаксис to также работает для углов. Например, если вам нужна ось градиента, начинающаяся с нижнего левого угла и идущая в верхний правый угол, можно сказать to top right:

.gradient {
  background-image:
    linear-gradient(
      to top right, 
      red, #f06d06
    );
}

.gradient {

background-image:

linear-gradient(

to top right,

red, #f06d06

);

}

Если бы блок был квадратным, то угол такого градиента стал бы 45°, но это не так. Если нужно гарантировать 45°, можно это заявить:

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      red, #f06d06
    );
}

.gradient {

background-image:

linear-gradient(

45deg,

red, #f06d06

);

}

Также вы не ограничены всего двумя цветами. Фактически, можно получить столько разделенных запятыми цветов, сколько нужно. Вот четыре:

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

.gradient {

background-image:

linear-gradient(

to right,

red,

#f06d06,

rgb(255, 255, 0),

green

);

}

Также можно заявить, где должен начинаться любой из отдельных цветов. Это называется «цветовыми остановами». Скажем, если вам нужно, чтобы желтый занимал больше всего места, а красный – совсем немного в самом начале, можно сделать color-stop желтого цвета довольно рано:

.gradient {
  height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      to right,
      red,
      yellow 10%
    );
}

.gradient {

height: 100px;

background-color: red;

background-image:

linear-gradient(

to right,

red,

yellow 10%

);

}

Мы склонный считать градиенты исчезающими цветами, но если у вас есть два одинаковых цветовых стопа, можно сделать немедленную смену одного плотного цвета другим плотным цветом. Это может пригодиться при заявлении фона в полную высоту, имитирующего колонки.

.columns-bg {
  background-image:
    linear-gradient(
      to right, 
      #fffdc2,
      #fffdc2 15%,
      #d7f0a2 15%,
      #d7f0a2 85%,
      #fffdc2 85%
    );
}

.columns-bg {

background-image:

linear-gradient(

to right,

#fffdc2,

#fffdc2 15%,

#d7f0a2 15%,

#d7f0a2 85%,

#fffdc2 85%

);

}

Браузерная поддержка/Префиксы

До сих пор мы рассматривали только новый синтаксис, но градиенты CSS уже довольно долго побыли в употреблении. У них хорошая браузерная поддержка. Ненадежными они становятся в синтаксисе и с префиксами. Браузеры поддерживают три разных синтаксиса. Официально они так не называются, но можете называть их:

Старый: исходный способ, применимый исключительно к WebKit, с такими штуками, как from() и color-stop()

Подростковый: старая система углов, например, left

Молодой: свежеиспеченная система углов, например, to right

А также префиксы. Давайте составим список:

Chrome

1-9: Старый, с префиксом

10-25: Подростковый, с префиксом

26: Молодой, без префикса

Safari

3-: Поддержка отсутствует

4-5.0: Старый, с префиксом

6.1: Молодой, без префикса

Firefox

3.5-: Поддержка отсутствует

3.6-15: Подростковый, с префиксом

16: Молодой, без префикса

Opera

11.0-: Поддержка отсутствует

11.1-11.5: Подростковый, с префиксом, только линейный

11.6-12: Подростковый, с префиксом, добавлен радиальный

12.1: Подростковый, без префикса

15: Молодой, без префикса

8-: Поддержка отсутствует

9: Только фильтры

10+: Молодой, без префикса (также поддерживается Подростковый с префиксом)

Android

2.0-: Поддержка отсутствует

2.1-3.0: Подростковый, с префиксом

4.0-4.3: Молодой, с префиксом

4.4+: Молодой, без префикса

iOS

3-: Поддержка отсутствует

3.2-4.3: Подростковый, с префиксом

5.0-6.1: Молодой, с префиксом

7.0: Молодой, без префикса

Здесь имеется небольшое наложение. Например, когда браузер поддерживает «молодой» синтаксис, он, возможно, также поддерживает более старые синтаксисы, включающие префикс. Лучше всего поступать так: если поддерживается «молодой», то его и применяйте. Так что, если вам нужна абсолютная глубочайшая браузерная поддержка, линейный градиент будет выглядеть примерно так:

.gradient {  
  /* альтернатива (также альтернативно можно применить .jpg/.png) */
  background-color: red;
  /* альтернативный вариант SVG для IE 9 (можно применить URI данных или использовать фильтр) */
  background-image: url(fallback-gradient.svg); 
  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
    /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);
  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);
  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(left, red, #f06d06);
  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to right, red, #f06d06);

}

.gradient {

/* альтернатива (также альтернативно можно применить .jpg/.png) */

background-color: red;

/* альтернативный вариант SVG для IE 9 (можно применить URI данных или использовать фильтр) */

background-image: url(fallback-gradient.svg);

/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */

background-image:

-webkit-gradient(linear, left top, right top, from(red), to(#f06d06));

/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */

background-image:

-webkit-linear-gradient(left, red, #f06d06);

/* Firefox 3.6 - 15 */

background-image:

-moz-linear-gradient(left, red, #f06d06);

/* Opera 11.1 - 12 */

background-image:

-o-linear-gradient(left, red, #f06d06);

/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

background-image:

linear-gradient(to right, red, #f06d06);

}

Тут ужасно много кода. Писать его вручную – это возможные ошибки и большое количество труда. Справиться с ним помогает Autoprefixer, позволяющий отрезать фрагменты кода, когда вы решите, какие браузеры будете поддерживать. Примесь-миксин Compass умеет делать URI данных SVG для IE 9, если вам это важно.

Фильтры IE

Internet Explorer (IE) 6-9, хотя и не поддерживает синтаксис градиентов CSS, предлагает программный метод создания фоновых градиентов

/* «Недействительный», но работает в 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Действительный, работает в 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

/* «Недействительный», но работает в 6-8 */

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Действительный, работает в 8-9 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Вот некоторые рассуждения на тему, применять их или нет:

filter обычно считается плохим для производительности,

background-image отменяет фильтр, поэтому если вам нужно применить его для альтернативного варианта, фильтры останутся за бортом. Если в качестве альтернативы подходит плотный цвет (background-color), можно применить фильтр

Даже хотя фильтры работают только со значениями hex, все равно можно получить alpha-прозрачность, поставив префикс к значению hex с количеством прозрачности от 00 (0%) до FF (100%). Пример:

rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A

1 2	rgba(92,47,90,1) == #FF5C2F5A rgba(92,47,90,0) == #005C2F5A

Радиальные градиенты

Радиальные градиенты отличаются от линейных тем, что начинаются в одной точке и «исходят» наружу. Градиенты часто используют для имитации освещения, которое, как мы знаем, не всегда прямое, поэтому ими можно пользоваться для того, чтобы сделать градиент еще натуральнее.

По умолчанию первый цвет начинается в (самом центре) элемента и затухает по направлению к краю элемента. Затухание происходит равными величинами, неважно в каком направлении.

.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}

.gradient {

background-image:

radial-gradient(

yellow,

#f06d06

);

}

Видно, как этот градиент создает фигуру-эллипс, так как элемент не квадратный. Это градиент по умолчанию (с ellipse в качестве первого параметра), но если мы скажем, что хотим окружность, то можем ее сделать:

.gradient {
  background-image:
    radial-gradient(
      circle,
      yellow,
      #f06d06
    );
}

.gradient {

background-image:

radial-gradient(

circle,

yellow,

#f06d06

);

}

Обратите внимание, что градиент округлый, но затухает на всей протяженности до конца цвета к дальнему краю. Если нужно, чтобы эта окружность находилась полностью внутри элемента, можно было бы обеспечить это, определив, что нам нужно затухание, оканчивающееся к ближайшей стороне closest-side, как отделенное запятыми значение фигуры, вроде этого:

.gradient {
  background-image:
    radial-gradient(
      circle closest-side,
      yellow,
      #f06d06
    );
}

.gradient {

background-image:

radial-gradient(

circle closest-side,

yellow,

#f06d06

);

}

Здесь возможны значения: closest-corner, closest-side, farthest-corner, farthest-side. О них можно думать так: «Мне нужно, чтобы этот радиальный градиент затухал от центральной точки до __________, приспосабливался и заполнял все вокруг».

Радиальному градиенту также не нужно по умолчанию начинаться в центре, вы можете назначить определенную точку, использовав at ______ в качестве первого параметра, как здесь:

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      yellow,
      #f06d06
    );
}

.gradient {

background-image:

radial-gradient(

circle at top right,

yellow,

#f06d06

);

}

Я проясню здесь все, приведя пример квадрата и регулировки цветового останова:

Браузерная поддержка

В основном такая же, как у linear-gradient(), за исключением того, что, когда начиналась поддержка градиентов, в очень старой версии Opera были только линейные, а не радиальные. Как и линейный, radial-gradient() претерпел некоторые изменения синтаксиса. И опять здесь: «Старый», «Подростковый» и «Молодой».

/* Пример Старого синтаксиса */
background-image: 
  -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));

/* Пример Подросткового */
background-image: 
  -webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0);

/* Пример Молодого */
background-image: 
  radial-gradient(circle farthest-side at right, #00F, #FFF);

/* Пример Старого синтаксиса */

background-image:

-webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));

/* Пример Подросткового */

background-image:

-webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0);

/* Пример Молодого */

background-image:

radial-gradient(circle farthest-side at right, #00F, #FFF);

Критерии следующие:

Старый: с префиксом -webkit-, штуки вроде from() и color-stop()

Подростковый: первый параметр – место центра. Теперь полностью ломается в браузерах, поддерживающих новый синтаксис без префикса, поэтому убедитесь, что у Подросткового синтаксиса имеется префикс.

Молодой: многословный первый параметр, типа circle closest-corner at top right

И снова я позволил бы справляться с этим Autoprefixer. Вы пишете в новейшем синтаксисе, он делает альтернативные варианты. Радиальные градиенты более заумные, чем линейные, поэтому я советую удовлетвориться новейшим синтаксисом и продолжить работу с ним (и, если нужно, забудьте все, что знаете о старых синтаксисах).

Повторные градиенты

У повторных градиентов ненамного меньшая браузерная поддержка. У них есть как линейные, так и радиальные разновидности.

Применительно к неповторным градиентам существует способ их создания так, чтобы тот был крошечным прямоугольником, и при выравнивании с прочими крошечными прямоугольными версиями самого себя создавал повторяющийся узор. Поэтому сначала сделайте такой градиент и установите background-size, чтобы получился такой маленький прямоугольник. Теперь легко создаются полоски, которые затем можно вращать и делать все, что угодно.

Пользуясь repeating-linear-gradient(), не приходится прибегать к подобным хитростям. Размер градиента определяется последним цветовым стопом. Если он происходит на 20px, то размер градиента (который затем повторяется) – это квадрат 20px на 20px.

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* определяет размер */
    );
}

.repeat {

background-image:

repeating-linear-gradient(

45deg,

yellow,

yellow 10px,

red 10px,

red 20px /* определяет размер */

);

}

То же самое с радиальным:

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}

.repeat {

background:

repeating-radial-gradient(

circle at 0 0,

#eee,

#ccc 50px

);

}

Неуместная загрузка альтернативы

Как мы уже говорили, некоторые действительно старые браузеры вообще не поддерживают синтаксиса градиентов CSS. Если вам требуется альтернатива, являющаяся градиентом, то сотворить такое чудо (.jpg / .png) может изображение. Самое ужасное то, что в некоторых слегка менее старых браузерах, которые уже начали поддерживать градиенты CSS, загрузится альтернативное изображение. Если так, то сделайте запрос HTTP к изображению, даже если он отобразит градиент CSS. Вот что сделал Firefox 3.5.8 (смотрите скриншот), а также Chrome 5- и Safari 5.0.1. Смотрите:

Safari 5.0.1 неправильно загружает альтернативные варианты

Хорошая новость – это больше не проблема. Единственными проблемными браузерами были Chrome и Safari, а Chrome так не делает уже с версии 6 и Safari – с 5.1, а с тех пор прошло уже три года.