Градиенты в css3 — как их использовать

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

Как использовать градиенты

Итак, в css3 появились линейные и радиальные градиенты. Чтобы использовать любой из них, необходимо указать следующее:

Важно, что градиент можно задать именно свойством background (или background-image), background-color для этого не подойдет!

Синтаксис линейного градиента

Итак, давайте разберемся с первым вариантом, потому что он немного проще.

Вот так окрасился наш тестовый блок:

Итак, теперь давайте разберемся с синтаксисом. Первым из параметров задается направление, то есть в какую сторону будет направлено изменение цветов. Видим, что в нашем случае направо. Соответственно, можно в любую другую сторону, не забывайте только писать с приставкой to.

Чтобы сделать диагональное направление, необходимо всего лишь записать два слова – направление по горизонтали и вертикали. Например:

Тут ничего сложного нет. Вместо ключевых слов вы можете задавать направление в градусах (deg) от 0 до 360 градусов, причем можно писать отрицательные значения.

Следующим параметром идет цвет. Он задан в режиме rgba, хотя можно и в любом другом.

Далее в коде видим какие-то проценты. Это так называемые колорстопы. Они определяют, на каком промежутке этот цвет будет наиболее насыщенным.

Резкие переходы

Чтобы сделать резкие переходы, нужно писать одинаковые колорстопы для двух соседствующих цветов. На словах объяснить сложно, давайте лучше на примере. Итак, создадим флаг, например, Эстонии, на чистом css. Я посмотрел в гугле цвета, из которых он состоит:

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

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

Имеет несколько другой синтаксис. Давайте опять посмотрим на примере:

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

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

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

Кроссбраузерность

Ни для кого не секрет, что свойство поддерживаются в более менее современных браузерах. Например, если писать без префиксов, как я делал в этой статье, то работать все будет только в браузерах, начиная от IE 10, Mozilla 16, Chrome 26 и Opera 12. Конечно, большинство людей обновляют ПО, но все же у некоторых могут стоять старые веб-обозреватели и они нашей красоты не увидят.

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

Второй, это использовать вендорные префиксы. Основные из них таковы: -o – опера, -moz – Mozilla, -webkit – Chrome, -ms – IE. Писать нужно не перед самим названием свойства, а перед значением. То есть так: -webkit-linear-gradient, а не так: -webkit-background: linear-gradient;

Из минусов можно отметить, что это очень сильно увеличивает количество кода в файле стилей, даже один градиент в таком случае может занять 20-30 строчек, но если кроссбраузерность для вас критична, то это необходимо. Хотя можно использовать постпроцессоры CSS. Autoprefixer, например, автоматом добавляет эти префиксы новым свойствам. Но это уже другой разговор.

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

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

Комментарии Вконтакте: