Filtros en CSS para aplicar efectos en imágenes

Los filtros CSS permiten aplicar efectos visuales a las imágenes. Para aplicar un filtro CSS a una imagen se utiliza la propiedad filter. Aquí tienes un ejemplo de cómo aplicar un filtro de desenfoque a una imagen:

HTML:

<img src="imagen.jpg" alt="Imagen" class="filtro-desenfoque">

CSS:

.filtro-desenfoque {
  filter: blur(5px);
}

En este ejemplo, la clase filtro-desenfoque se aplica a la etiqueta <img> para seleccionar la imagen a la que se le aplicará el filtro. La propiedad filter se utiliza con el valor blur(5px) para aplicar un desenfoque de 5 píxeles a la imagen.

Puedes ajustar el filtro y su valor según el efecto que desees lograr. También puedes combinar múltiples filtros separándolos por espacios en la propiedad filter, por ejemplo: filter: blur(5px) grayscale(100%); aplicaría tanto un desenfoque como una escala de grises a la imagen.

Es importante tener en cuenta que la compatibilidad de los filtros CSS puede variar entre los navegadores.

Filtros en CSS

A continuación se presentan algunos ejemplos de filtros CSS con una breve explicación:

Ejemplo en CodePen

filter: grayscale(100%);: Convierte la imagen a escala de grises.

Ejemplo en CodePen

filter: sepia(100%);:Aplica un tono sepia a la imagen.

Ejemplo en CodePen

filter: blur(5px);: Aplica un efecto de desenfoque a la imagen.

Ejemplo en CodePen

filter: brightness(190%);: Ajusta el brillo de la imagen.

Ejemplo en CodePen

filter: contrast(200%);: Ajusta el contraste de la imagen.

Ejemplo en CodePen

filter: saturate(200%);: Aumenta o disminuye la saturación de la imagen.

Ejemplo en CodePen

filter: hue-rotate(90deg);: Rota el matiz (tono) de la imagen.

Ejemplo en CodePen

filter: invert(100%);: Invierte los colores de la imagen.

Ejemplo en CodePen

filter: opacity(50%);: Ajusta la opacidad de la imagen.

Los valores utilizados en los ejemplos son solo ilustrativos y se pueden ajustar según tus necesidades.