Efecto de escala de grises con CSS3

Con la llegada del CSS3 al mundo web también llegaron gran variedad de filtros, estos son una excelente herramienta al momento de incluir efectos a imágenes o texto sin tener que utilizar herramientas de diseño para modificarlas.

Para ver el efecto de escala de grises funcionando tendrás que tener un navegador actualizado como Google Chrome, Opera, Firefox e Internet Explorer 9.

El efecto de escala de grises se logra con grayscale(porcentaje) el nombre del estilo depende del navegador en que estés para que funcione, por lo que si queremos que funcione en todos (O por lo menos en la mayoría de navegadores) debemos colocar las 4 opciones que son:

-webkit-filter: grayscale(porcentaje); /* Chrome - Safari */
-moz-filter: grayscale(porcentaje); /* Firefox */
-ms-filter: grayscale(porcentaje); /* IE9 */
-o-filter: grayscale(porcentaje); /* Opera */

El ejemplo lo utilizaremos con esta imagen http://www.mundonets.com/images/paisaje-rural-hd.jpg

Le agregamos el estilo: style=" -webkit-filter : grayscale(100%);-moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); "

El código de la imagen quedaría asi:

<img src="http://www.mundonets.com/images/paisaje-rural-hd.jpg" style="width : 400px; -webkit-filter : grayscale(100%);-moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); ">

Esta es la imagen original:



Este es el resultado con el efecto: