Как создать конические градиенты CSS для круговых диаграмм и многого другого

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

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

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

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

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

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

Положение цветовых ограничителей для конического градиента может быть указано либо в процентах, либо в градусах. Значение 0% или 0 градусов относится к вершине конического градиента. Значения постепенно увеличиваются при движении по часовой стрелке. Значение 360deg эквивалентно 0deg. Любой цвет, значение остановки цвета которого больше 100% или 360 градусов, не будет отображаться на коническом градиенте, но все равно будет влиять на его распределение цвета.

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

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

Синтаксис для конических градиентов

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

conic-gradient([ from <angle> ]? [ at <position> ]?, <angular-color-stop-list>) 

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

 background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg); background: conic-gradient(at center, yellow 0deg, orange 360deg); background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg); background: conic-gradient(from 0deg, yellow 0deg, orange 360deg); background: conic-gradient(yellow 0deg, orange 360deg); background: conic-gradient(yellow, orange); 

Вместо использования степеней, вы также можете использовать проценты. Как я уже упоминал ранее, значение 100% равно 360 градусам. Таким образом, значение 50% будет равно 180 градусов. Если вы точно знаете, какую часть круга вы хотите покрыть определенным цветом, использование процентов может быть проще. Точно так же положение центра конического градиента также может быть указано в процентах. Любое из приведенных выше значений конического градиента даст следующий результат:

 .wheel { background: conic-gradient(from 90deg, violet, indigo, blue, green, yellow, orange, red, violet); border-radius: 50%; } 

 .pie { background: conic-gradient(#FF5722 0% 35%, #FFEB3B 0% 60%, #2196F3 0% 100%); border-radius: 50%; } .pie { background: conic-gradient(#FF5722 0% 35%, #FFEB3B 35% 60%, #2196F3 60% 100%); border-radius: 50%; } 

 .donut { background: radial-gradient(white 40%, transparent 41%), conic-gradient(#FF5722 0% 35%, #FFEB3B 35% 60%, #2196F3 60% 100%); border-radius: 50%; } 

 .starburst { background: repeating-conic-gradient(#fbe462 0% 5%, #fd9c2a 5% 10%); } 

 .checker { background: repeating-conic-gradient(#fbe462 0% 25%, #fd9c2a 25% 50%); background-size: 100px 100px; }