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.
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...
Si desea saber más, le proponemos el siguiente libro:
Versión impresa
Versión online
En ilimitado con la suscripción ENI
En la tienda oficial de ENI
Condiciones generales de usoCopyright - © Éditions ENI ||Política de protección de datos del grupo ENI