Перейти к содержанию

Градиенты

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

CSS подкаст

021: Градиенты

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

Градиентный фон от темного до светло-фиолетового цвета с заголовками, абзацами и ссылками

Поначалу можно подумать, что для этого потребуется экспортировать изображение из инструмента дизайна, однако вместо этого можно использовать linear-gradient().

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

Data on support for the css-gradients feature across the major browsers from caniuse.com

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

Функция linear-gradient() формирует изображение из двух или более цветов, постепенно изменяя их. Она принимает несколько аргументов, но в простейшей конфигурации можно передать несколько цветов, как показано здесь, и она автоматически разделит их поровну, одновременно смешивая их.

1
2
3
.my-element {
    background: linear-gradient(black, white);
}

Можно также передать угол или ключевые слова, представляющие угол. Если вы решили использовать ключевые слова, укажите направление после ключевого слова to. Это означает, что если вы хотите получить черно-белый градиент, идущий слева (черный) на право (белый), то в качестве первого аргумента следует указать угол to right.

1
2
3
.my-element {
    background: linear-gradient(to right, black, white);
}

Значение цветовой остановки определяет, где цвет останавливается и смешивается с соседними. Для градиента, начинающегося с темного оттенка красного, идущего под углом 45 градусов, на 30% от размера градиента переходящего в более светлый красный: это выглядит следующим образом.

1
2
3
4
5
6
7
.my-element {
    background: linear-gradient(
        45deg,
        darkred 30%,
        crimson
    );
}

В linear-gradient() можно добавлять сколько угодно цветов и цветовых остановок, а также наслаивать градиенты друг на друга, разделяя каждый градиент запятой.

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

Для создания градиента, излучающего по кругу, на помощь приходит функция radial-gradient(). Она аналогична функции linear-gradient(), но вместо указания угла опционально задается позиция и конечная форма. Если просто указать цвета, то функция radial-gradient() автоматически выберет позицию center и выберет круг или эллипс, в зависимости от размера блока.

1
2
3
.my-element {
    background: radial-gradient(white, black);
}

Позиция градиента задается аналогично background-position с помощью ключевых слов и/или числовых значений. Размер радиального градиента определяет размер конечной формы градиента (круг или эллипс) и по умолчанию будет равен farthest-corner, что означает, что он точно соответствует самому дальнему от центра углу блока. Можно также использовать следующие ключевые слова:

  • closest-corner будет соответствовать ближайшему к центру углу градиента.
  • closest-side будет соответствовать стороне блока, ближайшей к центру градиента.
  • farthest-side будет противоположна closest-side.

Как и в случае с linear-gradient, можно добавить любое количество цветовых остановок. Аналогичным образом можно добавить столько же radial-gradients.

Конический градиент

Конический градиент имеет центральную точку в блоке, начинается сверху (по умолчанию) и идет по кругу в 360 градусов.

1
2
3
.my-element {
    background: conic-gradient(white, black);
}

Функция conic-gradient() принимает аргументы position и angle.

По умолчанию угол равен 0 градусов, то есть начинается сверху, в центре. Если задать угол 45deg, то это будет правый верхний угол. Аргумент angle принимает любой тип значения угла, как и линейный и радиальный градиенты.

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

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

Повторение и смешивание

Каждый тип градиента имеет и повторяющийся тип. Это функции repeating-linear-gradient(), repeating-radial-gradient() и repeating-conic-gradient(). Они аналогичны неповторяющимся функциям и принимают те же аргументы. Разница заключается в том, что если заданный градиент может быть повторен для заполнения блока, исходя из обоих его размеров, то он будет повторен.

Если градиент не повторяется, то, скорее всего, вы не задали длину одного из цветовых упоров. Например, с помощью repeating-linear-gradient можно создать полосатый фон, задав длину цветовых упоров.

1
2
3
4
5
6
7
8
9
.my-element {
    background: repeating-linear-gradient(
        45deg,
        red,
        red 30px,
        white 30px,
        white 60px
    );
}

Кроме того, можно смешивать функции градиента в свойствах background, а также задавать любое количество градиентов, как и в случае с фоновым изображением. Например, можно смешать несколько линейных градиентов или два линейных градиента с радиальным градиентом.

Ресурсы

Источник — Gradients

Комментарии