- Популярные видео
- Авто
- Видео-блоги
- ДТП, аварии
- Для маленьких
- Еда, напитки
- Животные
- Закон и право
- Знаменитости
- Игры
- Искусство
- Комедии
- Красота, мода
- Кулинария, рецепты
- Люди
- Мото
- Музыка
- Мультфильмы
- Наука, технологии
- Новости
- Образование
- Политика
- Праздники
- Приколы
- Природа
- Происшествия
- Путешествия
- Развлечения
- Ржач
- Семья
- Сериалы
- Спорт
- Стиль жизни
- ТВ передачи
- Танцы
- Технологии
- Товары
- Ужасы
- Фильмы
- Шоу-бизнес
- Юмор
Конические градиенты: что скрывает спецификация 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
В этом выпуске:
– Базовый синтаксис `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
Комментарии отсутствуют
Информация о видео
13 октября 2025 г. 18:03:45
00:15:24
Другие видео канала





















