Готовое решение — это CSS‑переменная --shadow и класс .shadowpic, который применяет filter: drop-shadow(...) к картинке.
В отличие от box-shadow, drop-shadow учитывает реальную форму изображения (включая прозрачные участки PNG), поэтому тень ложится ровно по контуру объекта. Это идеально для иконок, вырезов, стикеров, кастомных элементов в Zero Block и карточек товаров. Полностью код, пошаговая инструкция и пример. Если хочешь адаптировать скрипт под свой проект — напиши в комментарии или в ЛС. Подскажу, какие строки поменять и почему. Сохрани пост, чтобы не потерять рабочий код. И если есть задача, где стандартных блоков не хватает — давай обсудим кастомное решение.
Решение
Готовое решение — это CSS‑переменная --shadow и класс .shadowpic, который применяет filter: drop-shadow(...) к картинке.
В отличие от box-shadow, drop-shadow учитывает реальную форму изображения (включая прозрачные участки PNG), поэтому тень ложится ровно по контуру объекта. Это идеально для иконок, вырезов, стикеров, кастомных элементов в Zero Block и карточек товаров.
Зачем это нужно и где применять
- Иконки и кастомные кнопки в Zero Block — чтобы придать объём и отделить элемент от фона, не ломая прозрачность.
- Карточки товаров (каталог) — аккуратная тень под фото товара вместо жёсткого прямоугольника.
- Стикеры/бейджи/плашки — когда нужно показать «парящий» эффект, но сохранить сложную форму.
- Гайды и инструкции (для постов в сообществе) — выделять скриншоты и примеры кода, чтобы они визуально отделялись от фона.
- Документация правок и багов — показывать, как именно ты стилизуешь элементы, чтобы коллеги/клиенты могли повторить.
- Автолейаут в Zero Block — решение легко масштабировать на сетку карточек: один класс на все картинки, а тень меняется централизованно через :root.
Логика работы
- CSS‑переменная --shadow задаёт параметры тени в одном месте. Если позже захочешь поменять цвет/смещение/размытие — меняешь только её, и стиль обновляется везде, где используется .shadowpic.
- Класс .shadowpic применяет filter: drop-shadow(var(--shadow)). drop-shadow рисует тень по альфа‑каналу (прозрачности), а не по прямоугольной рамке.
- Изолированность: решение не влияет на другие картинки — тень появляется только у элементов с классом .shadowpic.
- Производительность: filter хорошо оптимизирован браузерами, а использование переменной позволяет избежать дублирования кода и упрощает поддержку (актуально для централизованного управления стилями).
Полностью код, пошаговая инструкция и пример.
Если хочешь адаптировать скрипт под свой проект — напиши в комментарии или в ЛС. Подскажу, какие строки поменять и почему.
Сохрани пост, чтобы не потерять рабочий код. И если есть задача, где стандартных блоков не хватает — давай обсудим кастомное решение.