Конические градиенты: что скрывает спецификация W3C | CSS Боль

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

В этом выпуске:
– Базовый синтаксис `conic-gradient()` и чем он отличается от радиального.
– Принцип работы: почему у конического градиента всегда есть резкий переход между первым и последним цветом — и как сделать его плавным.
– Как работают color stops и color hints, какие единицы измерения поддерживаются (`deg`, `grad`, `rad`, `turn`, проценты).
– Что дают отрицательные и большие значения углов — можно ли выходить за границы 0–360°.
– Параметры `from` и `at`: двигаем центр градиента и задаём начальный угол.
– Практика: создаём шахматную доску с помощью конического градиента и `background-size`.
– Заглядываем в спецификацию W3C и проверяем, что ничего не упустили.

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

Демонстрация → https://htmlacademy.ru/demos/211
Спецификация → https://www.w3.org/TR/css-images-4/

Таймкоды:

00:00 — Зачем изучать конические градиенты: примеры применения
02:07 — Как работает conic-gradient: центр, лучи и цветовой круг
03:14 — Резкий переход между первым и последним цветом
04:15 — Color stops: позиции цветов только в углах
07:24 — Параметры from и at: начальный угол и позиция центра
09:15 — Создаём шахматную доску с помощью conic-gradient
10:48 — Управление размером через background-size
11:39 — Погружаемся в CSS Images Module Level 4
12:21 — Описание принципа работы в спецификации
13:19 — Раздел про color stops в первоисточнике
14:10 — Color interpolation method и тонкости работы с цветом
15:06 — Заключение: что изучили и куда копать глубже

#css #frontend #webdevelopment #cssgradients

Видео Конические градиенты: что скрывает спецификация W3C | CSS Боль канала HTML Academy