- Теория
- Теория
Комбинация фильтров drop-shadow
Если применить несколько фильтров drop-shadow
к одному блоку, то их комбинация даст интересный эффект. Так как каждый следующий фильтр в комбинации применяется к изображению с предыдущими фильтрами, то ещё одна тень у блока с тенью создаст двойную тень.
.effect {
/* обычная тень */
filter: drop-shadow(0px 0px 0px black);
/* двойная тень */
filter: drop-shadow(0px 0px 0px black) drop-shadow(0px 0px 0px black);
}
В этом ещё одно отличие фильтра drop-shadow
от свойства box-shadow
. Подробнее про множественные тени box-shadow
рассказывается в части «Игра теней».
Кстати, фильтр drop-shadow
бывает полезно применять не только к изображениям, но и к обычным элементам. Тень будет, как и в случае с картинками, идти по непрозрачному контуру. В область тени включаются также псевдоэлементы блока.
Убедимся в этом на примере.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.