Мастерская. Пульсирующая градиентная заливка текста
В этом курсе-мастерской мы будем использовать радиальные градиенты для создания потрясающих декоративных эффектов. Мы создадим карточку заклинания «Взрыв» из всеми любимой игры «Герои Меча и Магии III» с красивым эффектом сияния, который будет отражаться на заголовке.
В первой части курса мы разберёмся, как создать эффект пульсирующей градиентной заливки для заголовка карточки.
В исходном состоянии у нас есть карточка со статичным фоновым изображением и заголовком, стилизованным по умолчанию.
Все стили, необходимые для реализации эффекта, будут применяться к заголовку h1.
Зададим для h1 брутальный и плотный шрифт Impact, который отлично подходит для заливки градиентом.
Увеличим размер шрифта заголовка до 60px.
Зададим высоту строки 1.1, чтобы сделать текст плотнее по вертикали.
Добавим text-transform: uppercase, чтобы текст заголовка автоматически преобразовывался в верхний регистр.
Приступим к градиентной заливке.
Добавим для заголовка фоновое изображение с помощью радиального градиента (radial-gradient). Первый цвет будет ярко-жёлтым (#FFE135) с позицией 35%. Пока цвет только один, он заполняет весь блок.
Добавим второй, более тёмный цвет — #D4A017, с позицией 35.1%. Получится резкий переход между цветами.
Добавим ещё одну пару цветов: такой же золотой, что и на предыдущем шаге, с позицией 48%, и тёмно-серый #555555 с позицией 48.1%.
Получится ещё один резкий переход из золотого в серый.
Добавим последний, самый тёмный цвет. Он займёт все оставшееся пространство градиента.
Принудительно зададим градиенту круглую форму. Для этого используем ключевое слово circle.
Сместим центр градиента в правый нижний угол блока.
И зададим радиус градиента с помощью ключевого слова farthest-side, что означает «до дальней стороны». Радиус градиента стал равен ширине h1.
Параметры заголовка и сам градиент готовы. Теперь нужно подготовиться к созданию анимации.
По умолчанию фоновое изображение-градиент привязано к левому верхнему углу контейнера, и его размеры равны размеру контейнера. Изменим позицию фона — поместим его в правый нижний угол.
Для анимирования градиента мы будем использовать самый простой приём — изменение размера фонового изображения.
Давайте посмотрим, как будет вести себя градиент, если задать размер, который больше контейнера.
Давайте ещё больше увеличим размер фона.
Получается то, что нам нужно: градиент «вырастает» из правого нижнего угла, и яркие области заливают контейнер.
Добавим свойство -webkit-background-clip: text;. Теперь фон применяется только к тексту, а не ко всей области контейнера.
Добавим свойство -webkit-text-fill-color: transparent;. Цвет текста стал прозрачным и проявилась градиентная заливка.
Начнём готовить настройки анимации.
Создадим переменную --implosion-timing-function и запишем в неё временную функцию для анимации. Эту временную функцию мы будем использовать в нескольких местах, поэтому переменную добавим в :root.
Временная функция создана с помощью новой CSS-функции linear(). Она описывает анимацию, которая мелко пульсирует в начале, а затем проигрывается почти линейно.
Добавим ключевые кадры анимации pulse-gradient. Всё просто — размер фона увеличивается от 100% 100% в начальной точке до 400% 400% в конечной.
Сложность анимации достигается за счёт временной функции.
Добавим анимацию pulse-gradient заголовку. Зададим ей длительность 10 секунд, бесконечное количество повторений, переменное направление воспроизведения и ранее созданную временную функцию.
Временно закомментируем -webkit-background-clip и -webkit-text-fill-color, чтобы увидеть, как ведёт себя анимация фона.
Раскомментируем -webkit-background-clip и -webkit-text-fill-color. Уберём свойство background-size, с которым мы экспериментировали ранее (оно всё равно переопределяется анимацией).
Эффект анимированной градиентной заливки текста готов. В следующей части добавим эффект сияния для изображения взрыва, и обе анимации заиграют в унисон!
