Filtros para imágenes con CSS3

En este tutorial veremos cómo modificar el aspecto de una imagen usando la propiedad filter de CSS3 y el prefijo -webkit, que es el único que cuenta con soporte para filtros, pero seguramente se sumen en próximas ediciones Firefox y Opera, por ese motivo usaré "provisionalmente" este prefijo para que se puedan testear los ejemplos.

[nota:559cdf6ed2] El prefijo -webkit- y sólo funciona con Chrome, Safari y iOS (Safari). [/nota:559cdf6ed2]

Los prefijos según el navegador

[css:1:559cdf6ed2]

-webkit-filter:/* Chrome y Safari */

-moz-filter:/* Mozilla */

-ms-filter:/* Internet Explorer */

-o-filter:/* Opera */[/css:1:559cdf6ed2]

La propiedad filter en CSS3

Esta propiedad afecta a cualquier elemento, ya sea texto, imagen o video. Dentro de filter podemos añadir uno o varios filtros que existen para esta propiedad, sin un máximo, simplemente separándolos por espacios.



[css:1:559cdf6ed2]-webkit-filter: [Filtro] [Filtro];[/css:1:559cdf6ed2]



Estos son los distintos tipos de filtros que podemos usar con nuestras imágenes o con cualquier elemento de nuestra página. Vale aclarar que podemos darle todo tipo de valores intermedios, por ejemplo: 0 / 0.5 / 1.

Blur (desenfoque)

[css:1:559cdf6ed2]-webkit-filter: blur(0px); /* Sin desenfoque */

-webkit-filter: blur(5px); /* 5px de desenfoque */[/css:1:559cdf6ed2]

Grayscale (escala de grises)

[css:1:559cdf6ed2]-webkit-filter: grayscale(0); /* Color */

-webkit-filter: grayscale(0.5); /* 50% color */

-webkit-filter: grayscale(1); /* Blanco y negro */[/css:1:559cdf6ed2]

Sepia (sepia)

[css:1:559cdf6ed2]-webkit-filter: sepia(0); /* Normal */

-webkit-filter: sepia(0.5); /* 50% sepia */

-webkit-filter: sepia(1); /* Sepia */[/css:1:559cdf6ed2]

Brightness (brillo)

[css:1:559cdf6ed2]-webkit-filter: brightness(0); /* Normal */

-webkit-filter: brightness(0.5); /* Imagen clara */

-webkit-filter: brightness(1); /* Blanco */[/css:1:559cdf6ed2]

:

Contrast (contraste)

[css:1:559cdf6ed2]-webkit-filter: contrast(0); /* Bajo contraste (gris) */

-webkit-filter: contrast(1); /* Normal */

-webkit-filter: contrast(10); /* Alto contraste */[/css:1:559cdf6ed2]

Hue-rotate (rotar matriz de color)

[css:1:559cdf6ed2]-webkit-filter: hue-rotate(0deg); /* Normal */

-webkit-filter: hue-rotate(180deg); /* Rotar la matriz 180 grados */

-webkit-filter: hue-rotate(270deg); /* Rotar la matriz 270 grados */[/css:1:559cdf6ed2]

Invert (invertir)

[css:1:559cdf6ed2]-webkit-filter: invert(0); /* Normal */

-webkit-filter: invert(0.5); /* Gris */

-webkit-filter: invert(1); /* Color invertido */[/css:1:559cdf6ed2]

Saturate (saturación)

[css:1:559cdf6ed2]-webkit-filter: saturate(0); /* Sin color */

-webkit-filter: saturate(1); /* Normal */

-webkit-filter: saturate(10); /* Alta saturación */[/css:1:559cdf6ed2]

Opacity (opacidad)

[css:1:559cdf6ed2]-webkit-filter: opacity(0); /* Transparente */

-webkit-filter: opacity(0.5); /* 50% transparente */

-webkit-filter: opacity(1); /* Normal */[/css:1:559cdf6ed2]

Ver los ejemplos funcionando aquí, y también un ejemplo aplicado a textos.

via Cristalab http://www.cristalab.com/tutoriales/filtros-para-imagenes-con-css3-c107506l/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%253A+clab+%2528Cristalab%2529