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

Тень, 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 рассказано в части «Игра теней»).

index.html
style.css

HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Тень, drop-shadow</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="compare"> <div class="compare-left shadow-1"> <div class="image"> <img src="img/spb-3.jpg" alt=""> </div> </div> <div class="compare-right shadow-2"> <div class="image"> <img src="img/spb-6.jpg" alt=""> </div> </div> </div> </body> </html>

CSS

.shadow-1 { } .shadow-2 { }

ЗадачиВыполнено

Блоку .shadow-1 задайте фильтр drop-shadow со значением 15px 15px 15px black,
а блоку .shadow-2 — со значением drop-shadow(0px 0px 20px red).

Тень, drop-shadow

Вход

Регистрация

Восстановление доступа