Мастерская. Эффект сияния
В этой мастерской мы используем радиальные градиенты для создания потрясающих декоративных эффектов. Мы создадим карточку заклинания «Взрыв» из всем известной игры «Герои Меча и Магии III» с красивым эффектом сияния, которое будет отражаться на заголовке.
Во второй части курса мы разберёмся, как создать эффект сияния на иллюстрации заклинания.
В начальном состоянии у нас есть карточка с логотипом, заголовком и подписью. Анимация заголовка временно отключена.
Чтобы создать эффект сияния, нужно добавить изображение заклинания и несколько обёрток.
Используем распространённый приём для создания голографических эффектов и адаптируем его под нашу задачу.
В этом приёме используется следующая структура тегов: обертка .shader, внутри которой содержится изображение и контейнер .shader__layer, содержащий ещё один .shader__layer. Внешний .shader__layer служит для «осветления» изображения, внутренний — для создания маски.
Переходим к стилизации.
Анимацию заголовка, которую мы добавляли в первой части, временно отключим.
Изображение заклинания пока находится внизу карточки и выходит за её пределы.
Зададим карточке относительное позиционирование и CSS-свойство overflow: hidden, чтобы обрезать изображение.
Теперь установим для контейнера .shader абсолютное позиционирование и привяжем его к правому нижнему углу карточки так, чтобы отображалась нужная часть иллюстрации
Для реализации декоративного эффекта нужно, чтобы все внутренние элементы контейнера располагались точно друг над другом. Проще всего этого добиться, задав контейнеру фиксированные размеры и придерживаться их для его потомков.
CSS-свойство backface-visibility: hidden помогает оптимизировать производительность этого эффекта.
Явно зададим ширину изображения внутри контейнера .shader. Это мера предосторожности на случай, если для тега img ширина не будет указана.
Начнём стилизовать .shader__layer.
Задача сделать так, чтобы элементы располагались над изображением и были таких же размеров, что и .shader. Поэтому зададим им абсолютное позиционирование и нулевые значения top и left...
...а также 100% ширину и высоту.
Теперь размеры «слоёв» привязаны к размерам контейнера.
Также временно зададим чёрный полупрозрачный фон, чтобы лучше видеть, как работает эффект.
Для полноценной работы декоративного эффекта оба блока .shader__layer должны иметь полностью чёрный фон, и мы сделаем его таким в самом конце.
Голографический эффект состоит из двух частей: маски и блика. Блик осветляет всё под собой, а маска придаёт блику нужную форму.
Наш блик должен иметь ту же форму, что и изображение, поэтому для создания маски используем то же изображение implosion.png. Добавим его как фон блока .mask.
Зададим фоновому изображению те же размеры, что и тегу img. Теперь оба изображения полностью совмещены, причём контейнер с фоном расположен над img.
В основе голографического эффекта лежит свойство mix-blend-mode, которое управляет тем, как элемент визуально смешивается с фоном под ним.
Значение multiply помогает «обрезать» будущую голограмму по границам фонового изображения. Именно поэтому блок называется маской.
Займёмся бликом. Для этого добавим радиальный градиент в качестве фонового изображения для блока .specular.
Напомним, что блок .mask вложен в .specular, поэтому градиентный фон располагается под изображением маски. Сейчас хорошо видно, как градиент выходит за границы маски.
Если установить для .mask полностью чёрный цвет фона, свойство mix-blend-mode: multiply начнёт работать в полную силу. Это приведёт к тому, что градиентный фон будет обрезан точно по границам изображения, а за границами будет виден чёрный цвет.
Именно этого мы сейчас и добиваемся.
Доработаем градиент. Во-первых, немного сместим центр вправо, установив для него координаты 51% 50%. Во-вторых, явно зададим радиус градиента. В дальнейшем мы будем анимировать градиент, изменяя радиус, чтобы получить эффект сияния.
Вы можете самостоятельно поэкспериментировать с радиусом, чтобы понять, как работает эффект. Меняйте его в диапазоне от нуля до 600px.
Вторая составляющая для достижения голографического эффекта — это использование свойства mix-blend-mode со значением color-dodge, которое применяется к блоку .specular.
Значение color-dodge является режимом наложения, который усиливает светлые области. Если верхний цвет полностью чёрный, то цвет под ним остаётся без изменений. Если же верхний цвет светлее, то он осветляет цвет, находящийся под ним.
Давайте вернём нормальный режим наложения для блока .specular. Ваша задача — переключиться между текущим и следующим шагом, чтобы сравнить результаты.
У блока .specular есть фоновое изображение с градиентом и полностью чёрные края. При включении режима color-dodge черный фон становится полностью прозрачным, а область под градиентом осветляется.
Вернём свойство mix-blend-mode: color-dodge для .specular.
Под чёрными участками ничего не изменилось, а под более светлыми участками изображение стало светлее.
Высветление получилось слишком сильным, потому что цвет фона у .specular был не полностью чёрным, а полупрозрачным чёрным rgba(0, 0, 0, 0.5). Такой полупрозрачный чёрный цвет также осветляет фон под собой, если мы используем mix-blend-mode: color-dodge.
Поэтому меняем фоновый цвет блика на полностью чёрный.
Перенесём чёрный цвет фона в общий класс .shader__layer.
Мы разобрались, как устроен голографический эффект. Теперь можем приступать к анимированию градиента.
Для начала вынесем радиус градиента в отдельную переменную --radius и используем её внутри функции radial-gradient().
Протестируем разные значения радиуса, чтобы понять, в каких границах должен пульсировать градиент.
Экспериментальным путём мы нашли границы от нуля до 600px.
Вернём в код --implosion-timing-function из первой части. Также добавим описание переменной --radius через @property. Это нужно для корректной работы анимации.
Добавим анимацию pulse, в которой меняем --radius до 600px в конечном состоянии.
Добавим анимацию pulse для .specular. Не забудем установить нулевое исходное значение для --radius.
Используем те же параметры анимации, что и у заголовка: длительность 10 секунд, бесконечное проигрывание с переменным направлением и временную функцию --implosion-timing-function.
Вернём анимацию заголовка и посмотрим, как два эффекта проигрываются в унисон!
На карточке заклинания происходит апокалиптический взрыв, который, разрастаясь, бросает блики на заголовок и окрашивает его в ярко-жёлтый цвет.
Напоследок покажем весь код, который использовался для создания обоих эффектов, и резюмируем роль радиальных градиентов.
Для пульсирующей заливки заголовка мы использовали радиальный градиент в сочетании с -webkit-background-clip: text и -webkit-text-fill-color: transparent. Для анимации применяли изменение свойства background-size.
Для создания эффекта сияния мы использовали радиальный градиент как часть голографического эффекта. Радиус градиента анимировали с помощью переменной.
Бонусный шаг. Апгрейд декоративного эффекта с помощью маски.
