Голограммы на чистом CSS: без JavaScript, без шейдеров | CSS Боль

Аватар автора
HTML Academy
Голографические эффекты выглядят как магия — плавные переливы, сияние и глубина, будто внутри работает шейдер или видео на фоне. Но всё это можно сделать на чистом CSS, без единой строчки JavaScript. В этом выпуске: - Как устроен голографический эффект: три слоя, которые имитируют работу шейдера. - Что делает каждый слой — маска, блик и базовое изображение, и почему важна их последовательность. - Как `conic-gradient()` создаёт живое сияние и почему он ключевой для эффекта. - Зачем регистрировать CSS-переменные через `@property` и как анимировать угол вращения градиента. - Как режимы `mix-blend-mode: multiply` и `color-dodge` создают ощущение настоящего света. - Практика: собираем эффект переливающейся карточки заклинания шаг за шагом. - Эксперименты с параметрами — меняем цвета, скорость вращения, тип градиента и получаем десятки вариантов «голограмм». Таймкоды: 00:00 Введение в голографические эффекты в CSS 01:02 Роль градиентов в создании эффектов 01:38 Подготовка разметки 02:38 Структура разметки и позиционирование элементов 04:36 Работа со слоями и градиентами 06:16 Анимация градиента 07:42 Настройка режимов смешивания цветов 09:36 Финальные штрихи и эксперименты 10:47 Заключение

Скачать Видео с Дзена / Dzen

Рекомендуем!

0/0


0/0

0/0

0/0