Teoría
Teoría

Combinar filtros

Podemos aplicar varios filtros a un mismo bloque. Para hacerlo, los escribimos separados por espacios en una sola declaración de filter:

.effect {
  filter: sepia(50%);
  filter: sepia(50%) blur(5px);
  filter: sepia(50%) blur(5px) opacity(50%);
}

Ten en cuenta que cambiar el orden de los filtros puede cambiar el resultado. Esto ocurre porque cada filtro se aplica a la imagen con los efectos de los filtros anteriores.

Vamos a probarlo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Combinar filtros</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image"> <img src="img/spb-6.jpg" alt=""> </div> <div class="compare"> <div class="compare-left multi-filter-1"> <div class="image"> <img src="img/spb-6.jpg" alt=""> </div> </div> <div class="compare-right multi-filter-2"> <div class="image"> <img src="img/spb-6.jpg" alt=""> </div> </div> </div> </body> </html>

CSS

.multi-filter-1 img { } .multi-filter-2 img { }

ObjetivosRealizado

Aplica a la imagen del bloque .multi-filter-1 el filtro hue-rotate(90deg).
Luego agrega un segundo filtro, saturate(2), en la misma declaración.
Agrega un tercer filtro, sepia(0.8), en esa misma declaración.
Aplica a la imagen del bloque .multi-filter-2 estos tres filtros en este orden: sepia(0.8),hue-rotate(90deg),saturate(2).