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%);
}

Este código muestra visualmente las imágenes de la página en escala de grises (al 75%, no completamente). Tenemos más filtros a nuestra disposición, no sólo el de escala de grises, y los veremos a continuación.

Nota: Aunque es la que se ha utilizado en el ejemplo, esta propiedad funciona con otros elementos HTML, es decir, no debe aplicarse necesariamente sobre una imagen.

Funciones de filtros

Los filtros de CSS nos proporcionan un amplio abanico de funciones, listas para utilizar mediante la propiedad filter y aplicarlas a los elementos que queramos de nuestra página. Estos filtros permiten alterar los colores, tonalidades o diferentes aspectos visuales, tal como se harían desde un programa de diseño gráfico:

Función	Significado	Valor	Mínimo	Máximo	>100%
grayscale	Escala de blanco y negro	|	0% (sin cambios)	100% = Grayscale	= 100%
blur	Grado de desenfoque Gausiano		0px (sin cambios)
sepia	Grado de color sepia	|	0% (sin cambios)	100% = sepia	= 100%
saturate	Grado de saturación	|	0% = desaturado	100% (sin cambios)	Sí
opacity	Grado de transparencia	|	0% = invisible	100% (sin cambios)	= 100%
brightness	Brillo	|	0% = negro	100% (sin cambios)	Sí
contrast	Contraste	|	0% = gris	100% (sin cambios)	Sí
hue-rotate	Rotación de color (matiz)		0deg (sin cambios)
invert	Invertir	|	0% (sin cambios)	100% = invertido	= 100%
drop-shadow	Sombra idéntica		(Ver apartado función drop-shadow())

En negrita el valor considerado valor por defecto.

Porcentajes o numéros

Observa que las funciones de filtros grayscale(), sepia(), saturate(), opacity(), brightness(), contrast() e invert() toman un ó un como valor, esto ocurre porque es posible proporcionar dicho valor de dos formas diferentes:

• Como valor porcentual: 0%, 50%, 100%, 150%...
• Como valor numérico: 0, 0.5, 1, 1.5...

Así pues, indicar filter: contrast(0.5) sería lo mismo que indicar filter: contrast(50%).

Rotación de colores

Cuando utilizamos la función hue-rotate(), proporcionaremos como parámetro una cantidad de ángulos. Esa cantidad realiza una rotación de colores (hue-rotate) que se puede ver facilmente si observamos una rueda de colores. El número de grados definido por parámetro especifica la rotación aplicada a los colores:

La función opacity

La propiedad opacity ya existe en CSS fuera de los filtros CSS como una propiedad independiente. Sin embargo, también existe como función de filtro de CSS. Ten en cuenta que si se utilizan ambas no se sobreescriben, sino que puedes obtener una opacidad superior (ambas sumadas).

Ejemplos en vivo de filtros

Veamos en vivo como funcionarían los filtros con esta imagen: