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

21.09.2011

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

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

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

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

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


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. 


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градусов. Градусы позволяют более точно направить градиент, чего нельзя добиться с помощью слов.

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

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

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


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

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


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

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


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

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

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


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

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


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

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

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


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.

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


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% по высоте и круглый градиент к ближайшей стороне.

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

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


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); }

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

На сегодня все. Статья и так получилась неприлично огромной. Спасибо всем, кто дочитал до этого места. Ретвиты и всякая социальщина только приветствуется. Удачного дня

, ,

Комментариев: 22

  1. Антон

    Статья шикарная. Спасибо. Можно рисовать теперь всё что угодно. А то, что не учитываете IE — правильно! Игнорить его надо. Может задумаются производители тогда, не будут людям «головоломки» делать.

    Ответить
  2. Сергей

    Нужен градиент в виде камуфляжа.
    Или камуфлированный текст на css БЕЗ использования картинок.
    Это возможно?

    Ответить
  3. Михаил Меренков

    Привет!
    в настоящее время актуальность применения префиксов сузилась.
    Чо опера теперь поёт в хоре Гугл де Хром, да когда старые трусы не подлежат восстановлению стоит покупать новые.
    Аа, ну да «префиксы»
    -webkit-
    -ms-
    Вполне хватит и этих аутсайдеров, надеюсь списки новых не сузят ползунок прокрутки старых :))

    Мы живем как шутим — шутим как живём.

    Ответить
    • GerinG

      Да, есть такая проблема, за это я IE не люблю и никогда его не учитываю в своих статьях. Решается, правда частично, использованием библиотеки Modernizr

      Ответить
  4. Lu

    Руководство можно было бы назвать полным, если бы в нем рассказвалось о том, как делать градиент в IE, о заявленной поддержке радиального градиента в IE10, о том, есть ли вендорные свойства для браузеров на движке KHTML. Так же полезна была бы информация в каких версиях браузеров работает описанный фукнционал.

    Ответить
    • GerinG

      Lu, статья написана больше года назад, когда о IE10 даже не слышали ))) Ок, я учту ваши пожелания и дополню статью новыми веяниями

      Ответить
  5. GerinG

    Pavel Cher — в этом случае да, спасибо за дополнение. А вот больше я не нашёл ошибок, покажете?

    Ответить
  6. Pavel Cher

    ex2 {background: linear-gradient(left,#000,#FFF75%,#000);}

    Там наверное пробелы между #fff и 75%, не?
    Там много таких ошибок

    Ответить
  7. 3Jlou_OguHo4ka

    Охренеть наворочки в CSS 3.0. Искал обычный градиент, в результате сделал хрен знает какой навороченный

    Ответить
  8. Hellga

    Спасибо за полезную инфу, изложенную в удобоваримой форме!

    Ответить
  9. Yury

    Насчет префиксов, есть скрипт — prefixfree.js — Название говорит само за себя. Только я еще это не опробовал.

    Ответить
  10. Dmitry

    Афигенный сайт, побольше бы такой развёрнутой информации.

    Большое-пребольшое спосибо.

    Ответить
  11. akkad

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

    Ответить
  12. Аноним

    Снеси ты этот плагин по выводу кода, опять только одни запятые в жёлтом боксе.

    Ответить
    • Виктор Милашечкин

      Женя, обнови лучше браузер, не экономь трафик )))  
      Только что проверил в Опере, Мозилле и Хроме — все показывает на отлично. Проверил на двух компах.

      Ответить