Красивые градиенты CSS

2022-01-15 0 ∞ 1

В этой статье я расскажу, как создать градиент с помощью CSS gradient. Градиенты могут быть применены к любому элементу с помощью свойства background или background-color.

Поддержка браузерами
Линейные градиенты
Различные варианты

Поддержка браузерами

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

Кроме этого разные браузеры иногда интерпретируют код немного по-разному. Чтобы обеспечить корректную работу, мы напишем несколько строк кода, которые делают то же самое, но имеют немного другой синтаксис. Мы также разработаем резервный вариант, который устанавливает сплошной цвет для браузеров, которые не распознают градиенты CSS.

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

linear gradient CSS плавно переводит один цвет в другой по прямой линии. Синтаксис следующий:

background: цвет1; /* Для браузеров, которые не поддерживают градиенты */
 background: -webkit-linear-gradient(цвет1, цвет2); /* Для Safari 5.1 - 6.0 */
 background: -o-linear-gradient(цвет1, цвет2); /* Для Opera 11.1 - 12.0 */
 background: -moz-linear-gradient(цвет1, цвет2); /* Для Firefox 3.6 - 15 */
 background: linear-gradient(цвет1, цвет2); /* Стандартный синтаксис */

Замените цвет 1 и цвет 2 обозначениями цветов по своему выбору: распознаваемое имя цвета или шестнадцатеричный код. А затем разделите два цвета запятой.

Этот код создает вертикальный градиент, который начинается с цвета 1 вверху и переходит в цвет 2 внизу. Это выглядит примерно так:

Различные варианты

Описанный выше случай, в котором мы объявляем в коде два цвета, представляет собой минимальный объем кода, который нужен для создания CSS background gradient.

Направления градиента

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

Есть несколько способов, с помощью которых это можно сделать. Три приведенных выше градиента были созданы с помощью следующего кода:

.left-gradient {
 background: #F2C14E; /* Для браузеров, которые не поддерживают градиенты */
 background: -webkit-linear-gradient(left, #F2C14E, #F78154); /* Для Safari 5.1 - 6.0 */
 background: -o-linear-gradient(left, #F2C14E, #F78154); /* Для Opera 11.1 - 12.0 */
 background: -moz-linear-gradient(left, #F2C14E, #F78154); /* Для Firefox 3.6 - 15 */
 background: linear-gradient(left, #F2C14E, #F78154); /* Стандартный синтаксис */
}
.diagonal-gradient {
 background: #F2C14E; /* Для браузеров, которые не поддерживают градиенты */
 background: -webkit-linear-gradient(left top, #F2C14E, #F78154); /* Для Safari 5.1 - 6.0 */
 background: -o-linear-gradient(bottom right, #F2C14E, #F78154); /* Для Opera 11.1 - 12.0 */
 background: -moz-linear-gradient(bottom right, #F2C14E, #F78154); /* Для Firefox 3.6 - 15 */
 background: linear-gradient(to bottom right, #F2C14E, #F78154); /* Стандартный синтаксис */
}
.sixtydeg-gradient {
 background: #F2C14E; /* Для браузеров, которые не поддерживают градиенты */
 background: -webkit-linear-gradient(60deg, #F2C14E, #F78154); /* Для Safari 5.1 - 6.0 */
 background: -o-linear-gradient(60deg, #F2C14E, #F78154); /* Для Opera 11.1 - 12.0 */
 background: -moz-linear-gradient(60deg, #F2C14E, #F78154); /* Для Firefox 3.6 - 15 */
 background: linear-gradient(60deg, #F2C14E, #F78154); /* Стандартный синтаксис */
}

Горизонтальные CSS gradient создаются путем указания направления (слева или справа) перед объявлением цветов. Таким же способом можно указать top или bottom.

Диагональные градиенты можно создавать, указывая, в каком углу начинается или заканчивается градиент, например, top left или bottom right - две стороны разделяются пробелом. Это тот случай, когда для браузеров нужно предоставлять немного различающиеся инструкции:

для Safari (-webkit-linear-gradient) укажите угол, в котором начинается цвет 1, например: top left;
для Opera и Firefox (-o-linear-gradient и -moz-linear-gradient) укажите угол, в котором заканчивается цвет 2, например: bottom right;
для всех остальных браузеров (то, что мы обозначили как «Стандартный синтаксис») укажите угол, в котором заканчивается цвет 2, со словом "to", например: to bottom right.

Определенные углы также можно задать, указав величину угла с единицами измерения "deg" (без пробела), например: 60deg. Ноль градусов дает вертикальный градиент, начинающийся снизу, а градусы вращают его по часовой стрелке на 360 градусов.

Несколько переходов цветов

Чтобы получить многоцветный градиент, укажите более двух цветов в нужном порядке, разделяя их запятыми. Вот CSS-код для приведенного на рисунке выше CSS background linear gradient:

.rainbow {
 background: #C94A4A; /* Для браузеров, которые не поддерживают градиенты */
 background: -webkit-linear-gradient(left, #C94A4A, #F78154, #F2C14E, #5FAD56, #4D9078); /* Для Safari 5.1 - 6.0 */
 background: -o-linear-gradient(left, #C94A4A, #F78154, #F2C14E, #5FAD56, #4D9078); /* Для Opera 11.1 - 12.0 */
 background: -moz-linear-gradient(left, #C94A4A, #F78154, #F2C14E, #5FAD56, #4D9078); /* Для Firefox 3.6 - 15 */
 background: linear-gradient(left, #C94A4A, #F78154, #F2C14E, #5FAD56, #4D9078); /* Стандартный синтаксис */
}

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

.specific-gradient {
 background: #C94A4A; /* Для браузеров, которые не поддерживают градиенты */
 background: -webkit-linear-gradient(left, #C94A4A 30%, #F2C14E 70%, #4D9078); /* Для Safari 5.1 - 6.0 */
 background: -o-linear-gradient(left, #C94A4A 30%, #F2C14E 70%, #4D9078); /* Для Opera 11.1 - 12.0 */
 background: -moz-linear-gradient(left, #C94A4A 30%, #F2C14E 70%, #4D9078); /* Для Firefox 3.6 - 15 */
 background: linear-gradient(left, #C94A4A 30%, #F2C14E 70%, #4D9078); /* Стандартный синтаксис */
}

Так как я не указал, где должен закончиться последний цвет, он по умолчанию заканчивается на 100% или в самом конце градиента.

Также можно указать точки перехода с использованием пикселей вместо процентов (например: #c94A4a 100px). Но не используйте и пиксели, и проценты в одной строке кода.

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

Другим видом градиента является radial gradient CSS, который начинается в центре и переходит в другой цвет по краям элемента:

.radial-gradient {
 background: #4CCEB2; /* Для браузеров, которые не поддерживают градиенты */
 background: -webkit-radial-gradient(#4CCEB2, #2F8FD8); /* Для Opera 11.1 - 12.0 */
 background: -o-radial-gradient(#4CCEB2, #2F8FD8); /* Для Opera 11.1 - 12.0 */
 background: -moz-radial-gradient(#4CCEB2, #2F8FD8); /* Для Firefox 3.6 - 15 */
 background: radial-gradient(#4CCEB2, #2F8FD8; /* Стандартный синтаксис */
}

Радиальный градиент задается значением radial-gradient, а не linear-gradient. Первый цвет начинается в центре и переходит в другой цвет по краям. Можно использовать несколько цветов и указать, где должен происходить переход. Установить направление градиента сложно, поскольку он распространяется во всех направлениях.

Если задать радиальный CSS gradient внутри фигуры, которая не является кругом, градиент будет корректироваться так, чтобы внешний цвет заканчивался по краям фигуры равномерно:

Всего наилучшего!