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.
Funciones de filtros
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 de sombras CSS) | |||
( ¹ ) 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). Por ejemplo, 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
opacityya existe en CSS fuera de los filtros CSS. Puede utilizarse de forma independientemente, con el siguiente formato:opacity: 0.75.
