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

Голографические эффекты выглядят как магия — плавные переливы, сияние и глубина, будто внутри работает шейдер или видео на фоне. Но всё это можно сделать на чистом CSS, без единой строчки JavaScript.

В этом выпуске:

- Как устроен голографический эффект: три слоя, которые имитируют работу шейдера.
- Что делает каждый слой — маска, блик и базовое изображение, и почему важна их последовательность.
- Как `conic-gradient()` создаёт живое сияние и почему он ключевой для эффекта.
- Зачем регистрировать CSS-переменные через `@property` и как анимировать угол вращения градиента.
- Как режимы `mix-blend-mode: multiply` и `color-dodge` создают ощущение настоящего света.
- Практика: собираем эффект переливающейся карточки заклинания шаг за шагом.
- Эксперименты с параметрами — меняем цвета, скорость вращения, тип градиента и получаем десятки вариантов «голограмм».

Демонстрация → https://htmlacademy.ru/demos/213
Статья → https://robbowen.digital/wrote-about/css-blend-mode-shaders/

Таймкоды:

00:00 Введение в голографические эффекты в CSS
01:02 Роль градиентов в создании эффектов
01:38 Подготовка разметки
02:38 Структура разметки и позиционирование элементов
04:36 Работа со слоями и градиентами
06:16 Анимация градиента
07:42 Настройка режимов смешивания цветов
09:36 Финальные штрихи и эксперименты
10:47 Заключение

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