Градиент CSS3. Примеры использования

градиент CSS3

Приветствую вас, дорогие друзья!

Хотите узнать как легко и быстро создать красивый градиент CSS3 на вашем сайте? Причём данный градиент можно будет настраивать под любой дизайн.
Давайте я покажу вам несколько примеров и увидите что это действительно просто.

Как создаётся линейный градиент CSS3

Линейный градиент это когда цвета представлены в виде прямой линии плавно и равномерно переходят один в другой.
Для создания линейного градиента при помощи CSS3 давайте создадим блок с классом «gradient-block»

Теперь при помощи CSS зададим для этого блока ширину, высоту и границу

Далее для данного блока я задам ещё один класс и уже для него буду задавать разные градиенты. Вы можете задавать градиент для класса основного блока, так как большой роли это не играет.
В итоге код блока будет выглядеть так:

Для задания простого линейного градиента нам понадобится свойство CSS3

При этом на первом месте вы задаёте цвет, который будет находиться вверху, а на втором – цвет, который будет находиться внизу.
Цвета можно задавать как при помощи названий зарезервированных цветов, например:

Так и при помощи шестнадцатиричного кода, например:

Однако данное CSS свойства является сравнительно новым и может не поддерживаться более старыми версиями браузеров. Поэтому при использовании на сайте следует указывать это свойство с кроссбраузерными префиксами.

То есть CSS код для задания градиента будет выглядеть так:

Вместо (#A4D8F7, #1C4D95) вы можете вписать свои цвета.
Также вы можете задавать три и более цветов для градиента.

Например так:

Также вы можете задавать в процентах соотношение цветов, если например вам нужно чтобы в градиенте из 3 цветов преобладал средний цвет, то можно написать так:

Не забываем про кроссбрузерные префиксы! С ними код градиента будет выглядеть так:

Интересно получается, не правда ли? Однако и это ещё не всё!
В градиенте CSS3 вы можете задавать не только цвета перехода, но и их направление.
Например:

Направление можно задать при помощи параметров :

  • Top – цвета идут сверху вниз
  • Left – слева на право
  • Right – справа на лево
  • Bottom – снизу вверх

Данные параметры определяют с какого направления будет начинаться переход. По умолчанию он идёт сверху вниз.
CSS код данного примера градиента будет выглядеть так:

Кроме направления для градиента CSS3 можно задать угол наклона.
Выглядеть это будет примерно так:

CSS код для градиента:

Здесь задан угол наклона 30 градусов. Вместо 30deg вы можете поставить своё значение.

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

Помимо линейного градиента в CSS3 можно создавать и радиальные, в которых переход цветов формируется в виде окружности.

Для задания радиального градиента используется следующее CSS свойство:

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

Код CSS3 для данного градиента будет выглядеть так:

Как видите даный CSS градиент растянуло в форме эллипса. Для того чтобы он был круглым нужно дописать ему параметр circle.
Тогда он примет следующий вид

CSS код градиента будет выглядеть так:

Также для задания радиального градиента в CSS3 есть ещё ряд параметров:

  • farthest-corner — при указании данного параметра градиент будет формироваться так что в боке будет отображаться его самый дальний угол.

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

    В CSS коде это выглядит так:

  • closest-corner – отображает близжайший угол градиента

    CSS код:

  • farthest-corner — отображает самый дальний угол градиента

Поэкспериментировав с разными свойствами и цветами можно получить очень интересные градиенты. Здесь всё зависит от вашей фантазии :)

Правила при использовании градиентов

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

  1. 1.Всегда используйте кроссбраузерные префиксы
  2. 2.Используйте двойной фон. Один будет просто цветом (для старых браузеров), а второй уже градиентом. В итоге если у браузера не получится отобразить градиент, то он отобразит обычный фон и ваш блок не окажется бесцветным.

В CSS это будет выглядеть так:

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

Если у вас возникли вопросы – пишите их в комментариях. Приятного вам градиентирования и до встречи в следующих статьях!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif