Градиенты

Подкаст CSS – 021: Градиенты

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

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

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

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

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

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

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

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

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

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

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

Ресурсы

• Conic.css — полезная коллекция конических градиентов.
• Руководство MDN по градиентам
• Генератор градиентов

Проверьте свое понимание

Проверьте свои знания о градиентах