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:

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% ¹
opacity Grado de transparencia 0% = invisible 100% = visible ¹
brightness Brillo 0% = negro 100% ¹
contrast Contraste 0% = gris 100% ¹
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 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:

Rotación de colores (Matiz HUE)

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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.