Градиенты CSS3. Полное руководство

Чтобы не искать по Интернету обрывки информации, лучше собрать все в одном месте. Сегодня поговорим о градиентах CSS3 — фишка нужная, часто используемая и, безусловно, полезная при разработке и верстке. Было желание сделать энциклопедическую статью, а как получилось — судить вам. 

«Градиент — вид заливки в компьютерной графике, в которой необходимо задать цвет и прозрачность определённых (ключевых) точек, а цвет и прозрачность остальных точек рассчитываются относительно них по определённым математическим алгоритмам. Таким образом можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.» Википедия

Но вернемся к теме статьи. В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим каждый вид подробнее, чтобы понять специфику их использования.

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

Линейный градиент это такой, в котором цвет переходит один в другой пропорционально между двумя точками по прямой линии. Проще всего — на примере:

Code
div {/*-префикс-linear-gradient(стартовый цвет,финишный цвет);*/
background: -moz-linear-gradient(#FFF, #000);
background: -ms-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-linear-gradient(#FFF, #000);
}


 

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

Пойдем дальше и рассмотрим более сложный пример — изменим направление градиента. Направление в синтаксисе носит название point и требует двух значений — откуда и куда. Всего есть пять значений: top, bottom, left, right и center. Соответственно, в написании направления нужно использовать два значения. Первым идет «откуда», вторым — «куда». Но есть небольшая тонкость — если указано только одно расположение — второе по умолчанию будет center. Учитывайте это в своих проектах.

В примере выше не указано направление градиента, поэтому по умолчанию выбирается направление top center.

Code
div { background: linear-gradient(center top, #FFF, #000); }
div { background: linear-gradient(top, #FFF, #000); }


Эти записи, на самом деле, аналогичны предыдущему примеру, но для простоты и уменьшения размера обычно в таком случае направление опускают, за ненадобностью.

Как альтернатива направлению, а скорее, как дополнение — в записи можно использовать углы, значение которых может задаваться в нескольких величинах, среди которых градусы, радианы и прочие геометрические штуки. Но для простоты — лучше использовать градусы, так будет понятно для всех. Градуировка расположена по часовой стрелке — 0 или 360 это верх, 90 — право, 180 — низ и 270 — лево. Допустима запись со знаком минус — в таком случае градуировка идет против часовой стрелки.

Рассмотрим несколько примеров, для понимания процесса:

ex1 { background: linear-gradient(left, #FFF, #000); }
ex2 { background: linear-gradient(right, #FFF, #000); }
ex3 { background: linear-gradient(225deg, #FFF, #000); }

Результат на картинке:


Первый вариант — слева направо, второй — справа налево, третий — 225градусов. Градусы позволяют более точно направить градиент, чего нельзя добиться с помощью слов.

Следующий интересный момент при работе с градиентами —

Добавление стоп-цвета

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

Code
div {background: linear-gradient(left,#000,#FFF,#000);}


В этом примере добавляется белый цвет между двумя черными. В результате получится градиент, который из черного переходит в белый и возвращается в исходное состояние — к черному. Нагляднее работу стоп-цвета покажу в нескольких примерах:

Code
ex1 {background: linear-gradient(left,#000,#FFF,#000);}
ex2 {background: linear-gradient(left,#000,#FFF75%,#000);}
ex3 {background: linear-gradient(bottom,#000,#FFF20px,#000);}
ex4 {background: linear-gradient(45deg,#000,#FFF,#000,#FFF,#000);}


Результат на картинке:
 

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

Второй пример — тоже самое, только указывается, в каком месте будет находится стоп-цвет. В данном случае — 75% от начала. Синтаксис прост — на примере видно. После значения цвета указываем позицию в процентах. Никаких запятых ставить не нужно.

Третий пример — показывает, что значение позиции стоп-цвета можно указывать не только в процентах, но и в пикселах (а также во всех других единицах, которые CSS понимает, но в основном используются проценты и пикселы)

Четвертый — пять стопов цвета, измененное направление. Все достаточно просто.

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

На самом деле — гораздо интереснее с ним работать, чем с линейным градиентом. Но, к сожалению, его вписать в дизайн удается не всегда. Радиальный градиент — тот, который распространяется от точки в центре по окружности.

Code
E { background: radial-gradient(
позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
); }


Синтаксис практически тот же, с одним отличием — добавилась форма и размер. Форма бывает двух видов — эллипс и круг (ellipse и circle, соответственно, по умолчанию значение:эллипс) Значение размера может принимать одно из шести значений. О них чуть ниже.

Простейший синтаксис выглядит так:

Code
div {background: radial-gradient(#FFF,#000);}


Радиальные градиенты нужно указывать с вендорным префиксом браузера:

Code
div {
background: -moz-radial-gradient(#FFF, #000);
background: -ms-radial-gradient(#FFF, #000);
background: -webkit-radial-gradient(#FFF, #000);
}


Результат выполнения кода — на картинке:
 

Рассмотрим код посложнее:

Code
div { background: radial-gradient(contain circle, #FFF, #000); }


Обратите внимание, в примере два селектора, о которых говорилось выше — форма и размер(положение). Размером значение селектора назвать сложно, скорее это расположение. Но в официальной документации этот селектор обозначен как size, поэтому будем называть его размером. Circle — как раз означает, что градиент будет круглым, а не эллиптическим. Contain — одно из ключевых слов, которое может принять селектор размера. Я опишу каждое, чтобы было понятнее:

closest-side - Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
closest-corner - Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
farthest-side - Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
farthest-corner - Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
contain - Аналогично closest-side.
cover - Аналогично farthest-corner.

Несколько примеров для наглядности:

Code
ex1 { background: radial-gradient(circle farthest-side, #000, #FFF); }
ex2 { background: radial-gradient(left,circle farthest-side,#000,#FFF); }
ex3 { background: radial-gradient(right top,circle cover,#FFF,#000); }
ex4 { background: radial-gradient(80% 50%,circle closest-side,#FFF,#000); }


Результат выполнения каждого кода:
 

Первый пример — круглый градиент, который распространяется к дальней стороне (используется farthest-side)

Второй — центр находится слева, градиент распространен к дальней стороне.

Третий — центр справа сверху, градиент к дальнему углу.

Четвертый — центр расположен в точке, 50% по ширине, 80% по высоте и круглый градиент к ближайшей стороне.

Добавление стоп-цвета

Как и линейные градиенты — радиальные тоже умеют работать с несколькими цветами. Их применение ничем не отличается от линейных, поэтому описывать не буду, только приведу несколько примеров:

Code
ex1 { background: radial-gradient(circle farthest-side,#000,#FFF,#000); }
ex2 { background: radial-gradient(circle farthest-side,#000,#FFF 25%,#000); }
ex3 { background: radial-gradient(left,circle farthest-side,#FFF,#000 25%,#FFF 75%,#000); }
ex4 { background: radial-gradient(40% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); }


 

Из кода все видно, вы уже опытные градиентщики wink

На сегодня все. Статья и так получилась неприлично огромной. Спасибо всем, кто дочитал до этого места. Ретвиты и всякая социальщина только приветствуется. Удачного дня
Code
ex1 { background: radial-gradient(circle farthest-side,#000,#FFF,#000); }
ex2 { background: radial-gradient(circle farthest-side,#000,#FFF 25%,#000); }
ex3 { background: radial-gradient(left,circle farthest-side,#FFF,#000 25%,#FFF 75%,#000); }
ex4 { background: radial-gradient(40% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); }

  • FalleN

  • 2272

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!