• Теория
  • Теория

Комбинация фильтров 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 бывает полезно применять не только к изображениям, но и к обычным элементам. Тень будет, как и в случае с картинками, идти по непрозрачному контуру. В область тени включаются также псевдоэлементы блока.

Убедимся в этом на примере.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кекстаграм: Начало. CSS-фильтры» тренажёра «Практика: фотоприложение с фильтрами» можно после регистрации и оформления подписки.