CSS-конический градиент онлайн урок.


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

Иллюстрируя разницу между коническими (левыми) и радиальными (правыми) градиентами.

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

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

# Синтаксис

Синтаксис конического градиента проще понять на простом английском языке:

Сделатьконический градиент, который находится в[некоторой точке], который начинается с[одного цвета]внекоторый уголи заканчивается[другим цветом]при[под некоторым углом]

Официальная спецификация выглядит более как это:

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

На самом базовом уровне это выглядит так:

.conic-gradient {
background: conic-gradient(#fff, #000);
}

... где предполагается, что местоположение градиента начинается в самом центре элемента (50% 50%) и равномерно распределяется между значениями белого и черного цвета.

Мы могли бы написать это несколькими другими способами, все из которых действительны:

.conic-gradient {
/* Original example */
background-image: conic-gradient(#fff, #000);
/* Explicitly state the location center point */
background: conic-gradient(at 50% 50%, #fff, #000);
/* Explicitly state the angle of the start color */
background: conic-gradient(from 0deg, #fff, #000);
/* Explicitly state the angle of the start color and center point location */
background: conic-gradient(from 0deg at center, #fff, #000);
/* Explicitly state the angles of both colors as percentages instead of degrees */
background: conic-gradient(#fff 0%, #000 100%);
/* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
background: conic-gradient(#fff 0deg, #000 1turn);
}

Если мы не укажем угол для цветов, тогда предполагается, что градиент будет равномерно распределен между цветами, начиная с0degи заканчивая на360deg. Такой тип создает жесткую остановку, когда цвета подпрыгивают прямо друг к другу в0degи360deg. Если наш начальный цвет начнется где-то еще на круге, скажем, одну четверть пути в90deg, тогда это создаст более плавный градиент, и мы начнем получать эту крутую перспективу с конусом.

.conic-gradient {
background: conic-gradient(from 90deg, #fff, #000);
}
Указание угла поворота (справа) создает более плавный градиент.

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

.conic-gradient {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
Макет, иллюстрирующий градиент коники, эмулирующий шаблон цветового колеса

Или попробуем простую круговую диаграмму, добавив жесткие остановки между тремя значениями цвета:

.conic-gradient {
background: conic-gradient(lime 40%, yellow 0 70%, red 0);
}
Макет, иллюстрирующий градиент коники, эмулирующий простую трехцветную круговую диаграмму

# Поддержка браузера

К сожалению,conic-gradientне поддерживает браузер на момент написания этой статьи. В настоящее время это часть спецификации CSS Image и замененного содержимого уровня 4 , которая находится в рабочем черновике. В то же время Лиа Веро (которая внесла свой вклад в спецификацию) предоставляет полиполк , который делает их возможными.

Эти данные поддержки браузера - от Caniuse , который имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

НетiOS Safari
НетНетНет
Opera Мобильный

Opera Mini

  • Android
  • Android Chrome