Эффектное решение для Zero Block: текстовый элемент приобретает плавную переливающуюся градиентную заливку. Работает на чистом CSS без использования JavaScript, не нагружает страницу и легко кастомизируется под фирменные цвета бренда с помощью CSS-переменных. Полностью код, пошаговая инструкция и пример. Если хочешь адаптировать скрипт под свой проект — напиши в комментарии или в ЛС. Подскажу, какие строки поменять и почему. Сохрани пост, чтобы не потерять рабочий код. И если есть задача, где стандартных блоков не хватает — давай обсудим кастомное решение.
Решение
Эффектное решение для Zero Block: текстовый элемент приобретает плавную переливающуюся градиентную заливку. Работает на чистом CSS без использования JavaScript, не нагружает страницу и легко кастомизируется под фирменные цвета бренда с помощью CSS-переменных.
Зачем это нужно и где применять
- Акцентирование заглавных офферов: идеальный выбор для главных заголовков (H1) на первом экране, промо-страницах и презентациях продуктов.
- Динамика без потери производительности: добавляет стильную микроанимацию на сайт без применения тяжелых видеофона или GIF-файлов.
- Удобная настройка под брендбук: все 4 цвета градиента задаются в одном месте через CSS-переменные (--grad-color-1 ... 4).
Логика работы
- Класс .gradient присваивается текстовому блоку в Zero Block и обращается к его внутреннему контейнеру с текстом (.tn-atom).
- Свойство -webkit-background-clip: text вырезает градиентный фон строго по контуру букв, а color: transparent делает базовый цвет текста прозрачным.
- CSS-анимация @keyframes gradient за 15 секунд плавно перемещает позицию увеличенного фона (background-size: 400% 400%), создавая бесконечный эффект переливающихся цветов.
Полностью код, пошаговая инструкция и пример.
Если хочешь адаптировать скрипт под свой проект — напиши в комментарии или в ЛС. Подскажу, какие строки поменять и почему.
Сохрани пост, чтобы не потерять рабочий код. И если есть задача, где стандартных блоков не хватает — давай обсудим кастомное решение.