Тень для PNG с прозрачным фоном
Решение
Готовое решение — это CSS‑переменная *--shadow* и класс *.shadowpic*, который применяет *filter: drop-shadow(...)* к картинке.
В отличие от *box-shadow*, *drop-shadow* учитывает реальную форму изображения (включая прозрачные участки PNG), поэтому тень ложится ровно по контуру объекта. Это идеально для иконок, вырезов, стикеров, кастомных элементов в Zero Block и карточек товаров.
В отличие от *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 хорошо оптимизирован браузерами, а использование переменной позволяет избежать дублирования кода и упрощает поддержку (актуально для централизованного управления стилями).
Пошаговая инструкция
1
Добавь блок T123 («HTML‑код») на страницу (можно в самый верх или низ).
2
Скопируй и вставь CSS из раздела ниже.
3
Примени класс к картинке:
- В Zero Block: выбери элемент «Изображение» или «Shape», в настройках установи «Класс» и напиши *shadowpic* (без точки).
4
Проверь результат: картинка должна получить тень по контуру.
5
Настрой тень под задачу: поменяй значение --shadow. Например:
- Для лёгкого эффекта: *0px 2px 4px rgba(0,0,0,0.3)*
- Для сильного объёма: *0px 10px 20px rgba(0,0,0,0.5)*
- Цвет можно менять: *rgba(255, 0, 128, 0.4)* — розоватая тень.
1-5 мин
Частые ошибки и как их избежать
Вместо drop-shadow используют box-shadow — тогда тень будет прямоугольной рамкой вокруг картинки, даже если у PNG есть прозрачные углы. Решение: используй именно filter: drop-shadow.
Тень «ломает» прозрачность или делает картинку чёрной — обычно это из‑за слишком высокой непрозрачности (alpha) или неверного порядка фильтров. Проверь значение rgba: последний параметр (непрозрачность) не должен быть 1, если хочешь мягкую тень.
Несколько фильтров конфликтуют — если к картинке уже применены другие filter (яркость, контраст, сепия), новый filter перезапишет старые. Решение: перечисляй все фильтры через пробел, например: filter: brightness(1.1) drop-shadow(...).
Класс не применяется — в Zero Block класс нужно писать без точки (не .shadowpic, а shadowpic) в поле «Класс». В HTML можно с точкой в селекторе, но сам атрибут class — без точки.
Тень слишком заметна на тёмном фоне — на тёмных подложках тень может теряться или, наоборот, выглядеть слишком агрессивно. Подбирай цвет и непрозрачность под фон: на тёмном — чуть светлее и меньше альфа, на светлом — контрастнее.
Не учитывают автолейаут и сетку — если делаешь сетку карточек, тень может «налезать» на соседние элементы. Проверь, хватает ли отступов между карточками, или добавь margin для картинок с тенью.
Тень «ломает» прозрачность или делает картинку чёрной — обычно это из‑за слишком высокой непрозрачности (alpha) или неверного порядка фильтров. Проверь значение rgba: последний параметр (непрозрачность) не должен быть 1, если хочешь мягкую тень.
Несколько фильтров конфликтуют — если к картинке уже применены другие filter (яркость, контраст, сепия), новый filter перезапишет старые. Решение: перечисляй все фильтры через пробел, например: filter: brightness(1.1) drop-shadow(...).
Класс не применяется — в Zero Block класс нужно писать без точки (не .shadowpic, а shadowpic) в поле «Класс». В HTML можно с точкой в селекторе, но сам атрибут class — без точки.
Тень слишком заметна на тёмном фоне — на тёмных подложках тень может теряться или, наоборот, выглядеть слишком агрессивно. Подбирай цвет и непрозрачность под фон: на тёмном — чуть светлее и меньше альфа, на светлом — контрастнее.
Не учитывают автолейаут и сетку — если делаешь сетку карточек, тень может «налезать» на соседние элементы. Проверь, хватает ли отступов между карточками, или добавь margin для картинок с тенью.
