Teoría
Teoría

Sombras con drop-shadow

El filtro drop-shadow permite agregar una sombra a un elemento. Su sintaxis es similar a la de la propiedad box-shadow.

.effect {
  /*
    sombra negra desplazada 10px en horizontal y
    5px en vertical, con un desenfoque de 3px
  */
  filter: drop-shadow(10px 5px 3px #000000);

  /* sombra verde sin desplazamiento, con un desenfoque de 5px */
  filter: drop-shadow(0px 0px 5px green);
}

A diferencia de box-shadow, el filtro de sombra no admite el parámetro inset para crear una sombra interior.

Además, el filtro de sombra no admite un parámetro de expansión (en el capítulo «Sombras de caja» se explica la expansión de las sombras con box-shadow).

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sombras con 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 { }

ObjetivosRealizado

Aplica al bloque .shadow-1 el filtro drop-shadow con el valor 15px 15px 15px black.
Aplica al bloque .shadow-2 el filtro drop-shadow(0px 0px 20px red).