Los filtros CSS son una característica muy atractiva de CSS que permite aplicar ciertos efectos de imagen, propios de aplicaciones de retoque fotográfico, como sepia, variaciones de brillo o contraste (u otros) al vuelo en el propio navegador, sin hacer cambios permanentes sobre una imagen.
Dichos filtros funcionan a través de la propiedad filter
, a la cuál hay que especificarle una función concreta de las existentes, como por ejemplo la función de blanco y negro (grayscale):
img {
filter: grayscale(75%);
}
Nota: Aunque es la que se ha utilizado en el ejemplo, esta propiedad funciona con otros elementos, es decir, no debe aplicarse necesariamente sobre una imagen.
Los filtros de CSS tienen a nuestra disposición un amplio abanico de funciones, listas para utilizar mediante la propiedad filter
y aplicarlas a los elementos que queramos:
Función | Significado | Valor | Mínimo | Máximo | >100% |
---|---|---|---|---|---|
grayscale |
Escala de blanco y negro | 0% ¹ | 100% = B&N | ||
blur |
Grado de difuminado | Tamaño de radio (desenfoque) | |||
sepia |
Grado de color sepia | 0% ¹ | 100% = sepia | ||
saturate |
Grado de saturación | 0% = B&N | 100% ¹ | Sí | |
opacity |
Grado de transparencia | 0% = invisible | 100% = visible ¹ | ||
brightness |
Brillo | 0% = negro | 100% ¹ | Sí | |
contrast |
Contraste | 0% = gris | 100% ¹ | Sí | |
hue-rotate |
Rotación de color (matiz) | 0/360deg ¹ | |||
invert |
Invertir | 0% ¹ | 100% = invertido | ||
drop-shadow |
Sombra idéntica | (Ver apartado función drop-shadow()) |
( ¹ ) Es el valor considerado como original
Nota: En las cantidades de
se pueden utilizar indistintamente porcentajes (entre 0% y 100%) o valores numéricos con decimales (entre 0 y 1). Ej: filter: contrast(0.5)
es lo mismo quefilter: contrast(50%)
.
Estas propiedades permiten alterar los colores, tonalidades o diferentes aspectos visuales, tal como se harían desde un programa de diseño gráfico. Por ejemplo, la rotación de colores (hue-rotate) se representa mediante una rueda de colores, donde el grado definido especifica el matiz que se le da a los colores, pudiendo alterarlo ligera o intensamente:
Nota: La función
opacity
ya existe en CSS fuera de los filtros CSS. Puede utilizarse de forma independientemente, con el siguiente formato:opacity: 0.75
.