Конические градиенты
В этом курсе мы научимся создавать конические градиенты, управлять цветами, расположением цента и начального угла градиентов.
Конические градиенты создаются с помощью CSS-функции conic-gradient(). Она создаёт изображение, в котором цвета плавно переходят от одного к другому, при этом цвета вращаются вокруг центральной точки. Классический пример конического градиента — цветовой круг.
Чтобы создать простейший конический градиент, достаточно указать в conic-gradient() два цвета. Давайте создадим градиент, в котором цвет #ff6f61 переходит в цвет #1ea4d9. Цвета перетекают один в другой по часовой стрелке.
Разберёмся, как управлять цветами в коническом градиенте.
Добавим в наш градиент ещё один цвет — #d4ff40, разместив его между первым и вторым цветами.
Получим плавный переход от #ff6f61 к #d4ff40, а затем к #1ea4d9. Цвета меняют друг друга по направлению часовой стрелки.
Чтобы переходы были плавными по всему кругу, первый и последний цвет в списке колорстопов должны совпадать.
Пропорциями цветов в градиенте можно управлять. Для этого достаточно указать для цвета его позицию.
В отличие от линейных и радиальных градиентов, где цветовые остановки (color stops) размещаются с указанием позиции цвета — его длины в пикселях, процентах и т. д., в коническом градиенте колорстопы определяются с помощью углов (градусов, радиан, оборотов).
Браузеры также принимают процентные значения для указания колорстопов. В этом случае 100% соответствует 360 градусам или одному полному кругу.
Подробнее разберём единицы измерения для определения позиции цвета в конических градиентах.
Позицию цвета можно задавать в deg, grad, rad и turn.
Начнём с deg — градусов. Можно указать 0deg, 120deg, 240deg.
Один полный круг равен 360deg.
В примере мы использовали жёсткие переходы между цветами. Для этого для каждого цвета указали две точки (начало и конец цвета), и каждый следующий цвет начинается с той же точки, на которой остановился предыдущий.
grad чем-то похож на deg. Это единица измерения углов в градианной системе. В этой системе полный круг делится на 400 градусов, то есть равен 400grad.
rad — радианы.
Можно указать 0rad, 2.0944rad, 2.0944rad, 4.1888rad.
Один полный круг равен 2π радиан или 6.2832rad.
Повороты или turn.
Один полный круг равен 1turn.
Значения угла для колорстопов можно задавать и за пределами круга, то есть меньше 0 и больше 360 градусов. В этом случае цвета в коническом градиенте распространяются по спирали, и мы видим только часть этой спирали от 0 до 360 градусов. Несмотря на то, что эти цвета не отображаются напрямую, их использование может повлиять на то, как выглядит конический градиент.
Чтобы убедиться в этом, сравним два элемента с одинаковыми цветами. В первом элементе для первого цвета укажем значение колорстопа меньше нуля. Во втором — равное нулю. Значения колорстопов для других цветов останутся равными.
Это чем-то похоже на ситуацию, когда в радиальном градиенте мы задавали первому колорстопу отрицательную позицию, чтобы получить интересный цветовой эффект.
Попробуем задать значение больше 360 градусов.
Если все значения в списке колорстопов будут находиться за пределами круга, мы увидим только первый или последний цвет, в зависимости от того, по какую сторону находятся значения колорстопов.
По умолчанию центр конического градиента располагается в центре контейнера, но этим можно управлять.
Управлять центром градиента можно с помощью параметра <position>, который указывается перед списком колорстопов. Этот параметр начинается с ключевого слова at и принимает два значения: горизонтальную и вертикальную координаты.
В качестве координат можно использовать ключевые слова left, right, center, top, bottom, а также другие значения.
Сместим центр градиента в левый верхний угол, для этого добавим at left top перед списком колорстопов.
Вместо ключевых слов top, bottom, center, left и right можно использовать значения в пикселях, процентах и других единицах измерения.
Установим центр в точке с координатами 100px, 80px.
Посмотрим, как работают проценты. Установим центр в точке с координатами 70%, 60%.
Помимо списка колорстопов и позиции центра, можно управлять расположением начального угла градиента.
Если значение не указано, по умолчанию начальный угол равен 0deg.
Управлять расположением начального угла градиента можно с помощью параметра <angle>. Этот параметр начинается с ключевого слова from и указывается перед списком колорстопов и перед позицией центра (если она задана).
В качестве значения указывается угол, который определяет вращение градиента по часовой стрелке.
Повернём начальный угол на 45 градусов.
Как и для списка колорстопов, для начального угла можно задавать любые единицы измерения углов. В качестве начального угла укажем — 0.75turn.
Можно указать отрицательные значения.
Мы рассмотрели основные возможности конических градиентов. Теперь давайте разберемся с практическим примером.
Классические примеры использования конических градиентов — это круговые диаграммы, цветовой круг и шахматная доска.
Рассмотрим, как с помощью конического градиента можно создать изображение шахматной доски.
Добавим разметку для доски и её поля.
Добавим видимую границу для доски. Укажем CSS-свойство border.
Определим размеры доски — 300 на 300 пикселей.
Добавим небольшие поля.
Зальём доску белым цветом.
Переходим непосредственно к полю с клетками. Также укажем видимую границу.
Зададим размеры. На этот раз укажем размеры в процентах 100% на 100%, чтобы поле растянулось на всё доступное пространство.
Приступим к рисованию клеток.
Для клеток используем конический градиент. Для тёмных клеток используем цвет #333333, для светлых — #ffffff. Цвета резко меняют друг друга. Для этого начальная точка белого цвета совпадает с конечной точкой тёмного. В качестве единиц измерения для колорстопов используем повороты (turn). Первая клетка готова.
Начальный угол и центр оставляем со значениями по умолчанию.
Добавим светлую клетку.
Добавим ещё одну светлую клетку.
Чтобы увеличить число клеток, зададим размеры фонового изображения, так чтобы наш рисунок поместился четыре раза по горизонтали и четыре раза по вертикали.
Шахматная доска готова!
