Índice

Filtros gráficos

Con la propiedad filter, es posible aplicar sobre imágenes o sobre otro elemento HTML efectos de filtros hasta ahora reservados a programas de edición gráfica.

El módulo Filter Effects Module Level 1 nos propone el uso de la propiedad filter. Este módulo está todavía en estado Working Draft a 25 de noviembre de 2014: http://www.w3.org/TR/filter-effects/. En la tabla de compatibilidad de Can I use, vemos que la propiedad solo se reconoce en MS Internet Explorer y parcialmente en MS Edge. Los navegadores Chrome y Opera todavía necesitan el uso de prefijos.

images/C22-003.png

Los filtros disponibles son:

grayscale(valor)

Nivel de gris, donde valor es un número entre 0 y 1 o un porcentaje.

sepia(valor)

Efecto sepia, donde valor es un número entre 0 y 1 o un porcentaje.

saturate(valor)

Saturación, donde valor es un número entre 0 y 10 o un porcentaje.

hue-rotate(ángulo)

El ángulo se expresa en grados.

invert(valor)

Efecto negativo, donde valor es un número entre 0 y 1 o un porcentaje.

opacity(valor)

Opacidad, donde valor es un número entre 0 y 1 o un porcentaje.

brightness(valor)

Luminosidad, donde valor es un número entre 0 y 1 o un porcentaje.

contrast(valor)

Contraste, donde valor es un número entre 0 y 1 o un porcentaje.

blur(valor)

Difuminar, donde el valor se expresa en píxeles.

drop-shadow(sombra)

Sombra, por ejemplo drop-shadow(6px 6px 20px black).

Para visualizar estos efectos, vaya a las webs http://jsbin.com/uziyih ...