19. Filters

Los filtros nos dan la capacidad de alterar los colores a partir de un algoritmo determinado. Lo podemos aplicar a elementos o imágenes.

Esenciales

Difuminar

.elemento {
  filter: blur(5px);
}

Brillo

.elemento {
  filter: brightness(2);
}

Contraste

.elemento {
  filter: contrast(200%);
}

Sombra de la imagen

Solo funciona con SVGs.

posición x, posición y, suavizado y color.

.elemento {
  filter: drop-shadow(30px 10px 4px green);
}

Escala de grises o transformar a blanco y negro

.elemento {
  filter: grayscale(100%);
}

Rotación de colores del modelo HSL

.elemento {
  filter: hue-rotate(90deg);
}

Imagen obtenida de Stackoverflow donde también encontrarás una completa explicación.

Invertir

.elemento {
  filter: invert(100%);
}

Transparencia

.elemento {
  filter: opacity(50%);
}

Saturación

.elemento {
  filter: saturate(50%);
}

Sepia

.elemento {
  filter: sepia(100%);
}

Múltiples filtros

filter: contrast(175%) brightness(3%);

Más información

Actividad 1

Muestra una imagen. Cuando el cursor esté por encima añade un filtro que la convierta a escala de grises (blanco y negro).

Actividad 2

Muestra la imagen de un esqueleto. Cuando el cursor esté por encima añade un filtro que la invierta los colores dándole un aspecto de radiografía.