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.
0
Ejemplo en CodePen
filter: sepia(100%);
:Aplica un tono sepia a la imagen.
0
Ejemplo en CodePen
filter: blur(5px);
: Aplica un efecto de desenfoque a la imagen.
0
Ejemplo en CodePen
filter: brightness(190%);
: Ajusta el brillo de la imagen.
0
Ejemplo en CodePen
filter: contrast(200%);
: Ajusta el contraste de la imagen.
0
Ejemplo en CodePen
filter: saturate(200%);
: Aumenta o disminuye la saturación de la imagen.
0
Ejemplo en CodePen
filter: hue-rotate(90deg);
: Rota el matiz (tono) de la imagen.
0
Ejemplo en CodePen
filter: invert(100%);
: Invierte los colores de la imagen.
0
Ejemplo en CodePen
filter: opacity(50%);
: Ajusta la opacidad de la imagen.
0
Los valores utilizados en los ejemplos son solo ilustrativos y se pueden ajustar según tus necesidades.