Los filtros CSS permiten aplicar efectos visuales a cualquier elemento HTML y a las imágenes directamente en CSS sin utilizar previamente un programa de diseño gráfico. Para aplicar un filtro CSS a una imagen o contenedor se utiliza la propiedad filter y se pueden aplicar efectos como desenfoque, contraste, saturación, ajuste del brillo o conversión a escala de grises, entre otros.
Diferencias entre blend modes y filtros: los blend modes se utilizan para mezclar colores entre elementos superpuestos, mientras que los filtros se utilizan para aplicar efectos visuales directamente al contenido de un elemento.
1. Filtros CSS: Sintaxis de la propiedad filter de CSS
Como hemos dicho, la propiedad filter de CSS permite aplicar efectos visuales a elementos de la página. Estos efectos se aplican mediante funciones de filtro, que pueden tener uno o más valores según el efecto deseado. Veamos la sintaxis de la propiedad filter en CSS y los valores que acepta.
Sintaxis:
selector {
filter: <función-de-filtro>(<valor>) ;
}
Valores más comunes que acepta la propiedad filter:
| Función | Descripción | Valores |
|---|---|---|
blur( | Aplica un desenfoque al elemento | <valor> cantidad de desenfoque a aplicar |
brightness( | Ajusta el brillo del elemento | <valor> 0: completamente oscuro, 1: original |
contrast( | Ajusta el contraste del elemento | <valor> 0: completamente gris, 1: original |
grayscale( | Convierte el elemento a escala de grises | <valor> 0: original, 1: escala de grises |
hue-rotate( | Gira el espectro de colores del elemento | <valor> es la cantidad de grados en sentido horario 0 a 360deg |
invert( | Invierte los colores del elemento | <valor> 0: original, 1: invertido |
opacity( | Ajusta la opacidad del elemento | <valor> 0: transparente, 1: original |
saturate( | Ajusta la saturación del elemento | <valor> 0: grisáceo , 100%: original |
sepia( | Aplica un tono sepia al elemento | <valor> 0: original, 1: sepia completo |
Veamos 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.
2. Ejemplos de filtros aplicados en CSS
A continuación se presentan algunos ejemplos de filtros CSS con una breve explicación:
2.1. Filtros CSS sobre un contenedor
Ejemplo en CodePen
En el siguiente ejemplo se muestran todos los filtros especificados en la tabla 1 sobre un contenedor de color rojo.
2.2. Filtros CSS sobre imágenes
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(20%);: 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.