Filtros CSS

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:

( ¹ ) 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 que filter: 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.