Градиенты

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

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

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

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

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

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

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

Хотя в CSS допустимо использовать только один цвет в функциях градиента, это приведет к получению только сплошного цвета:

.my-element {
    background: linear-gradient(red);
}

Вы также можете передать угол или ключевые слова, которые представляют угол. Если вы решили использовать ключевые слова, укажите направление после ключевого слова 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 , это был бы верхний правый угол. Аргумент angle принимает любой тип значения угла, например линейный и радиальный градиенты.

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

Вы можете добавить столько цветовых остановок, сколько захотите, как и с другими типами градиентов. Хорошим примером использования этой возможности с коническими градиентами является рендеринг круговых диаграмм с помощью 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 , а также определять столько градиентов, сколько вам нужно, как вы это делаете с фоновым изображением. Например, вы можете смешать несколько линейных градиентов вместе или два линейных градиента с радиальным градиентом.

Интерполяция и цветовые пространства

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

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

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

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

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

.my-element.increasing {
  background: linear-gradient(in oklch increasing hue, deeppink, yellow);
}

.my-element.decreasing {
  background: linear-gradient(in oklch decreasing hue, deeppink, yellow);
}

Помимо настройки интерполяции, цилиндрические цветовые пространства (HSL, HWB, LCH и OKLCH) предлагают shorter (по умолчанию) или longer ключевые слова, чтобы указать, должна ли линия градиента проходить по длинному пути вокруг цветового круга или по короткому пути между двумя цветами.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

Ресурсы

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

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

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