Градиенты

Подкаст 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 по градиентам
Генератор градиентов

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

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

Какое минимальное количество цветов необходимо для создания градиента?

Попробуйте еще раз!

Они могут быть одного цвета и выглядеть однотонными, но да, требуется как минимум два цвета.

Попробуйте еще раз!

Элементы могут иметь несколько градиентов в качестве фона?

Истинный

Свойство background-image позволяет использовать множество градиентов, просто разделите их запятой.

ЛОЖЬ

О, но они могут!