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

Тень, drop-shadow

С помощью фильтра drop-shadow можно добавить тень к объекту. Синтаксис фильтра такой же, как и у свойства box-shadow.

.effect {
  /*
    чёрная тень, смещённая на 10px по горизонтали и
    на 5px по вертикали, с радиусом размытия 3px
  */
  filter: drop-shadow(10px 5px 3px #000000);

  /* несмещённая зелёная тень с радиусом размытия 5px */
  filter: drop-shadow(0px 0px 5px green);
}

В отличие от box-shadow фильтр тени не поддерживает параметр inset для внутренней тени.

Кроме того, на момент написания части в фильтре тени не поддерживается растяжение (подробнее о растяжении в свойстве box-shadow рассказано в части «Игра теней»).

Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.

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

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

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

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

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

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

Зарегистрироваться