[HTML Academy] Конические градиенты: что скрывает спецификация 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