Градиенты CSS3. Полное руководство
Чтобы не искать по Интернету обрывки информации, лучше собрать все в одном месте. Сегодня поговорим о градиентах CSS3 — фишка нужная, часто используемая и, безусловно, полезная при разработке и верстке. Было желание сделать энциклопедическую статью, а как получилось — судить вам.
Кстати, для тех, кто только начинает осваивать CSS — замечательная статья от Натальи Митрофановой — Как использовать CSS. Всем новичкам очень рекомендую ознакомиться. Доступно, понятно — в общем, на отлично
Но вернемся к теме статьи. В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим каждый вид подробнее, чтобы понять специфику их использования.
Линейный градиент CSS3
Линейный градиент это такой, в котором цвет переходит один в другой пропорционально между двумя точками по прямой линии. Проще всего — на примере:
1 2 3 4 5 6 | 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.
1 2 | div { background: linear-gradient(center top, #FFF, #000); }div { background: linear-gradient(top, #FFF, #000); } |
Эти записи, на самом деле, аналогичны предыдущему примеру, но для простоты и уменьшения размера обычно в таком случае направление опускают, за ненадобностью.
Как альтернатива направлению, а скорее, как дополнение — в записи можно использовать углы, значение которых может задаваться в нескольких величинах, среди которых градусы, радианы и прочие геометрические штуки. Но для простоты — лучше использовать градусы, так будет понятно для всех. Градуировка расположена по часовой стрелке — 0 или 360 это верх, 90 — право, 180 — низ и 270 — лево. Допустима запись со знаком минус — в таком случае градуировка идет против часовой стрелки.
Рассмотрим несколько примеров, для понимания процесса:
1 2 3 | ex1 { background: linear-gradient(left, #FFF, #000); }ex2 { background: linear-gradient(right, #FFF, #000); }ex3 { background: linear-gradient(225deg, #FFF, #000); } |
Первый вариант — слева направо, второй — справа налево, третий — 225градусов. Градусы позволяют более точно направить градиент, чего нельзя добиться с помощью слов.
Следующий интересный момент при работе с градиентами —
Добавление стоп-цвета
Пока мы использовали только простые градиенты, состоящие из двух цветов. Теперь займемся примером посложнее — добавим еще один цвет к градиенту. Примерно так:
1 | div {background: linear-gradient(left,#000,#FFF,#000);} |
В этом примере добавляется белый цвет между двумя черными. В результате получится градиент, который из черного переходит в белый и возвращается в исходное состояние — к черному. Нагляднее работу стоп-цвета покажу в нескольких примерах:
1 2 3 4 | ex1 {background: linear-gradient(left,#000,#FFF,#000);}ex2 {background: linear-gradient(left,#000,#FFF 75%,#000);}ex3 {background: linear-gradient(bottom,#000,#FFF 20px,#000);}ex4 {background: linear-gradient(45deg,#000,#FFF,#000,#FFF,#000);} |
Результат на картинке:
В первом примере как раз то, о чем говорилось выше — белый точно между двумя черными(черт, как неполиткорректно получилось).
Второй пример — тоже самое, только указывается, в каком месте будет находится стоп-цвет. В данном случае — 75% от начала. Синтаксис прост — на примере видно. После значения цвета указываем позицию в процентах. Никаких запятых ставить не нужно.
Третий пример — показывает, что значение позиции стоп-цвета можно указывать не только в процентах, но и в пикселах (а также во всех других единицах, которые CSS понимает, но в основном используются проценты и пикселы)
Четвертый — пять стопов цвета, измененное направление. Все достаточно просто.
Радиальный градиент CSS3
На самом деле — гораздо интереснее с ним работать, чем с линейным градиентом. Но, к сожалению, его вписать в дизайн удается не всегда. Радиальный градиент — тот, который распространяется от точки в центре по окружности.
1 2 3 | E { background: radial-gradient(позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп); } |
Синтаксис практически тот же, с одним отличием — добавилась форма и размер. Форма бывает двух видов — эллипс и круг (ellipse и circle, соответственно, по умолчанию значение:эллипс) Значение размера может принимать одно из шести значений. О них чуть ниже.
Простейший синтаксис выглядит так:
1 | div {background: radial-gradient(#FFF,#000);} |
Радиальные градиенты нужно указывать с вендорным префиксом браузера:
1 2 3 4 5 | div {background: -moz-radial-gradient(#FFF, #000);background: -ms-radial-gradient(#FFF, #000);background: -webkit-radial-gradient(#FFF, #000);} |
Результат выполнения кода — на картинке:
Рассмотрим код посложнее:
1 | 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.
Несколько примеров для наглядности:
1 2 3 4 | 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% по высоте и круглый градиент к ближайшей стороне.
Добавление стоп-цвета
Как и линейные градиенты — радиальные тоже умеют работать с несколькими цветами. Их применение ничем не отличается от линейных, поэтому описывать не буду, только приведу несколько примеров:
1 2 3 4 | 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); } |
Из кода все видно, вы уже опытные градиентщики
