Конические градиенты в CSS
Конические градиенты в CSS
Оригинал: https://newinweb.com/2018/09/23/conic-gradients/
Перевод: Влад Мержевич
Большинство веб-разработчиков уже имели дело с линейными и радиальными градиентами. С их помощью создание градиентов в CSS происходит очень просто, хотя ранее нужно было использовать предварительно созданные изображения. Недавно в спецификации CSS Image Values and Replaced Content был определён новый тип — конический градиент. Он позволяет использовать градиенты, которые рисуются по окружности.
Название «конический градиент» основано на том, что когда в этом градиенте применяются контрастные цвета, он создаёт эффект конуса. Иногда такие градиенты также называют угловыми.
Поддержка в браузерах
Конические градиенты в настоящее время поддерживаются только в Chrome и Safari, но ведётся работа по их поддержке и в Firefox. К счастью, для конического градиента существует весьма хороший полифилл, который просто требует добавления JavaScript-файлов на вашу веб-страницу. После чего можно писать CSS, как если бы он поддерживался. В этой статье как раз используется указанный полифилл для отображения примеров в неподдерживаемых браузерах.
Базовые конические градиенты
Если вы уже использовали другие типы градиентов, то формат будет знакомым. Наипростейший градиент включает в себя начальный и конечный цвета.
background: conic-gradient(white, black);Видно, что градиент внезапно останавливается, когда он возвращается к началу. Чтобы избавиться от подобного, можно в качестве последнего цвета снова установить начальный цвет, что приведёт к более плавному градиенту. Также это даёт выраженный эффект конуса, который и дал градиенту его имя.
background: conic-gradient(white, black, white);Очевидно, что градиент начинается и заканчивается на белой линии вверху. Эту начальную точку можно сместить, используя ключевое слово from. Смещение указывается в градусах через обозначение deg. Давайте сдвинем начало градиента немного влево. Помните, что в круге 360 градусов, а точка 0 градусов находится вверху в центре. Смещение на -45 градусов приведёт к полному вращению градиента на 1/8.
background: conic-gradient(from -45deg, white, black, white);Продвинутые конические градиенты
Конических градиентов гораздо больше, чем в простых примерах выше.
Цветовой круг
Одним из типовых примеров использования конических градиентов является цветовой круг. Это хороший пример, так как его легко написать, а результат выглядит довольно сложным. Вы можете добавить к градиенту любое желаемое количество цветов и они будут автоматически разнесены на равные интервалы.
background: conic-gradient(yellow, lime, blue, violet, red);Круговые диаграммы
Можно установить конический градиент не с плавными, а с резкими переходами цветов. До этого в градиентах мы использовали только цвета, разделяя их запятыми. Однако на самом деле есть два других параметра, которые можно добавить к каждому цвету. Это точки остановки и начала цвета, они могут быть указаны либо в deg, либо в %. Давайте посмотрим на круговую диаграмму, а затем более подробно рассмотрим, как она работает.
background: conic-gradient(#444 0 25%, gold 0 70%, #0af 0 100%);Наш первый цвет — это # 444 0 25%. Он начинает градиент с 0 (так же, как 0deg или 0%) и рисует цвет #444 для 25% круга (так же, как 90deg).
Далее у нас цвет gold от 0 до 70%. Когда начальная точка цвета меньше, чем конечная точка предыдущего цвета, тогда градиент начнётся с конечной точки предыдущего цвета. Таким образом, в нашем случае браузер будет интерпретировать второй цвет как gold с 25% до 70%. Также важно отметить, что 70% здесь означает 70% от начала круга, а не от начала этого цвета. Итак, наш золотой цвет займёт 45% круга, а не 70%.
Окончательно мы завершаем наш круг с цветом #0af, пройдя весь путь до 100%. Значение 100% не является обязательным, поскольку браузер понимает, что последний цвет должен идти до конца. Но так более читабельно.
Поскольку можно использовать deg или %, то существует много разных способов написать один и тот же градиент. Все градиенты ниже приведут к одной и той же круговой диаграмме, показанной выше.
background: conic-gradient(#444 0 90deg, gold 0 252deg, #0af 0 360deg);
background: conic-gradient(#444 0 25%, gold 25% 70%, #0af 70% 100%);
background: conic-gradient(#444 0 25%, gold 0 70%, #0af 0);Смещения с помощью at
Конические градиенты не обязаны начинаться с центра их контейнера. Как и radial-gradient, они поддерживают параметр at, который указывает, где должен располагаться центр градиента. Вы должны указать координаты x и y в процентах. В настоящее время полифилл не поддерживает at, поэтому в браузерах, ещё не поддерживающих конические градиенты, пример будет выглядеть некорректно.
background: conic-gradient(at 50% 25%, yellow, lime, blue, violet, red, yellow);Учтите, что если вы также используете параметр from, то не должны добавлять запятую между from и at.
background: conic-gradient(from 90deg at 50% 25%, yellow, lime, blue, violet, red, yellow);Повторяющиеся градиенты
В спецификацию добавлен repeating-conic-gradient, это довольно удобно, чтобы не писать одно и то же снова и снова.
background: repeating-conic-gradient(from -5deg, gold 0 10deg, red 0 30deg);Демонстрация
С помощью conic-gradient можно делать гораздо больше. Посмотрите мой пример на Codepen с коническим градиентом и поиграйте с ним для понимания, что вы можете с ним сделать.