Сегодня мы разберём радиальные градиенты в CSS так, чтобы вы не только умели их писать, но и понимали, как они работают внутри. Без лишней теории — только практика, полезные приёмы и парочка фишек, которые даже опытные разработчики иногда упускают. В этом выпуске вы узнаете: - как устроен базовый синтаксис radial-gradient(); - почему первый цвет всегда в центре, а последний — на краю; - как использовать color stops, чтобы управлять плавностью переходов или сделать резкие границы; - как форма контейнера влияет на градиент и почему круг не всегда круг; - как сдвигать центр и создавать интересные композиции. Темы выпуска: – Простая база: что делает radial-gradient и как задать цвета. – Color stops без магии: распределение цветов, проценты, пиксели, даже отрицательные значения. – Форма градиента: эллипс, круг и gradient box — кто за что отвечает. – Центр градиента: ключевые слова, проценты и неожиданные эффекты при смещении. – Анимации: почему напрямую не получится и как спасти ситуацию с CSS-переменными. Вступление и контекст 00:00 – Почему радиальные градиенты — это больше, чем просто фон? Почему важно понимать, как они устроены, а не просто копировать код. 00:45 – Базовый синтаксис radial-gradient(). Первый цвет в центре, последний на краю. Минимальный набор знаний для старта. Управление цветами 02:10 – Color Stops: управление плавностью переходов. Как распределяются цвета по умолчанию и что делать, если нужна другая плотность. 04:30 – Резкие границы: одинаковые позиции для разных цветов. Приём, который превращает плавный градиент в чёткий круг. 06:00 – Сокращения и упрощения. Как убрать лишнее из записи и зачем это нужно. 07:20 – Пиксели и отрицательные значения. Когда процентами не обойтись. Как получить неожиданные эффекты, используя отрицательные позиции. Форма и размеры градиента 09:00 – Градиент и контейнер: кто влияет на форму? Почему радиальный градиент чаще эллипс, а не круг. Роль gradient box. 11:15 – background-size: тонкий контроль размеров. Как подогнать градиент под задачу, изменяя не контейнер, а фон. Позиционирование 13:00 – Центр градиента: координаты и ключевые слова. at left top, проценты и пиксели. Как смещение меняет композицию. 15:45 – Эффект смещения: круг превращается в эллипс. Что происходит с формой при асимметричном положении центра. Анимации и спеки 17:30 – Анимация радиальных градиентов. Почему они не анимируются напрямую и как спасти ситуацию с CSS-переменными. 19:10 – CSS Images Module Level 3 и Level 4. Что говорят спецификации и как они помогают понимать нюансы. Финал 20:00 – Заключение. Советы для экспериментов и рекомендации по изучению темы глубже.