Объёмная иконка в стиле глассморфизма
В этой демонстрации разберём один из дизайнерских приёмов — Глассморфизм.
Глассморфизм (от англ. glassmorphism) — это эффект «матового стекла», который создается за счёт яркой подложки и специальной стилизации.
Использовать этот эффект будем для иконки тучи со снегом. Наше исходное состояние — разметка для иконки и её элементов.
Начнём с того, что укажем размеры иконки.
Часть, которая отвечает за тучу, будет занимать всю ширину и высоту иконки. Укажем width и height для неё равными 100%. Зададим полупрозрачный цвет заливки, как должно быть у объектов в стиле глассморфизма.
Чтобы <div class="icon__cloud"> принял форму облака, используем CSS-свойство mask. В качестве маски используем изображение cloud.svg. Укажем размеры маски 100% 100%.
Помимо полупрозрачности, для глассморфизма характерно размытие. Добавим его с помощью CSS-свойства backdrop-filter.
Приступим к созданию объёма для облака. Начнём с внутренней тени.
Добавим ещё одно значение в box-shadow, чтобы сделать объёмным нижний край облака.
В разметке у нас уже заготовлены дополнительные <div class="icon__cloud-reflect">. Их мы используем для создания объёма по краю облака, первый для левой части, второй — для правой.
Сперва создадим объём для левой части. Укажем размеры рефлектора. Вынесем его в отдельный слой за счёт position: absolute. Точкой отсчёта координат рефлектора сделаем контейнер с облаком .icon__cloud. Чтобы изменения стали более заметны, временно зальём рефлектор чёрным цветом.
Добавим скругление для рефлектора, так он будет повторять форму левой части облака.
Добавим тени. Первую.
Вторую.
Третью.
И четвёртую.
С помощью clip-path вырежем лишнее.
Уберём чёрный фон и проверим, что получается.
Похожим образом настроим рефлектор для правой части. Его положение и размеры отличаются, установим нужные значения. Временно добавим заливку чёрным цветом.
Помимо размеров и координат, у второго рефлектора отличается область, которую нужно вырезать. Укажем нужные значения.
Уберём временную заливку цветом.
Облако готово.
Приступим к созданию снежинок. Они также будут располагаться в отдельном слое, но точкой отсчёта координат будет сама иконка .icon. Определим размеры снежинки. Укажем цвет фоновой заливки.
Определим координаты снежинки.
С помощью трансформации развернём снежинку на 45 градусов и добавим смещение.
Размножим снежинку за счёт тени. Чтобы не определять цвет каждой тени (а их у нас будет много), укажем значение CSS-свойства color.
За счёт множественной тени добавим ещё снежинки.
И ещё. Только в этот раз за счёт параметра растяжение уменьшим размер снежинок.
Добавим ещё немного снежинок, которые сделаем по размеру меньше предыдущих.
За счёт отрицательного z-index поместим снежинки за облаком.
На финальном шаге добавим анимацию snow с падающим снегом.
Иконка тучи со снегом с эффектом глассморфизма готова.
