Teoría
Teoría

Combinar filtros drop-shadow

Aplicar varios filtros drop-shadow a un mismo bloque produce un efecto interesante. Como cada filtro de la combinación se aplica a la imagen con los efectos anteriores, al agregar otra sombra a un bloque que ya tiene una, también se crea una sombra de la primera sombra.

.effect {
  /* sombra normal */
  filter: drop-shadow(10px 10px 0px black);

  /* sombras combinadas */
  filter: drop-shadow(10px 10px 0px black) drop-shadow(10px 10px 0px black);
}

Esta es otra diferencia entre el filtro drop-shadow y la propiedad box-shadow. En el capítulo «Sombras de caja» se explican las sombras múltiples con box-shadow.

Por cierto, drop-shadow resulta útil tanto para imágenes como para otros elementos. Igual que con las imágenes, la sombra sigue el contorno no transparente. También incluye los pseudoelementos del bloque.

Veámoslo con un ejemplo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Combinar filtros drop-shadow</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="bubble">¡Ccccombo!</div> </body> </html>

CSS

.bubble { }

ObjetivosRealizado

Aplica al bloque .bubble el filtro drop-shadow con el valor 20px 20px 0px #0074d9.
Luego cambia el desplazamiento horizontal de la sombra a 200px.
Agrega un segundo filtro, drop-shadow(0px 100px 0px #2ecc40), en la misma declaración.