Filtros CSS

Los filtros CSS son una característica relativamente nueva de CSS que permite aplicar ciertos efectos de imagen propios de aplicaciones de retoque fotográfico como sepia o variación de contraste al vuelo, 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%);
}

Funciones de filtros

Existen varias funciones disponibles para utilizar con la propiedad filter:

Función Significado Valor Descripción
grayscale Escala de blanco y negro Porcentaje 0% = original, 100% = B&N
blur Grado de difuminado Tamaño Tamaño del radio de desenfoque
sepia Grado de color sepia Porcentaje 0% = original, 100% = sepia
saturate Grado de saturación Porcentaje 0% = B&N, 100% = original, permite >100%
opacity Grado de transparencia Porcentaje 0% = invisible, 100% = visible
brightness Brillo Porcentaje 0 = negro, 100% = original, permite >100%
contrast Contraste Porcentaje 0 = gris, 100% = original, permite >100%
hue-rotate Rotación de color (matiz) Direccion 0 ó 360deg = original
invert Invertir Porcentaje 0% original, 100% = invertido
drop-shadow Sombra idéntica PosX PosY Tamaño Color (Ver apartado de sombras)

Nota: En las cantidades de Porcentajes 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, muy similares a los efectos de cualquier 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)

La función opacity ya existe en CSS fuera de los filtros CSS que vemos en este apartado. Puede utilizarse independientemente, con el siguiente formato: opacity: 0.75.

Modos de fusión

Mediante la propiedad mix-blend-mode también se pueden utilizar los denominados modos de fusión, muy comunes en programas profesionales de retoque fotográfico como Photoshop, para aplicar sobre elementos de contenido, como imágenes o similares. Por otro lado, también se puede utilizar la propiedad background-blend-mode para aplicar el modo de fusión a las imágenes de fondo utilizadas con la propiedad background-image o background.

body {
  background: green;
}

img {
  mix-blend-mode: multiply;
}

Entre los diferentes modos de fusión que podemos utilizar están los siguientes:

Modo de fusión Significado
normal No se aplica ningún modo de fusión.
multiply Multiplicar.
screen Trama.
overlay Superponer.
darken Oscurecer.
lighten Aclarar.
color-dodge Sobreexponer color.
color-burn Subexponer color.
hard-light Luz fuerte.
soft-light Luz suave.
difference Diferencia.
exclusion Exclusión.
hue Tono.
saturation Saturación.
color Color.
luminosity Luminosidad.

Podemos hacer uso de la propiedad isolation con valor auto o isolate, para que, en el último caso, se proteja un elemento de la mezcla de fusión y aislarlo sin que se aplique.

Manz
Publicado por Manz

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