Efecto de escala de grises con CSS3

En esta ocasión queremos enseñarte la forma de agregar un efecto de escala de grises a las imágenes de tu web sin tener que modificarlas.
 
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:
 

Escribir un comentario

Código de seguridad
Cambiar codigos
*Introducir código.

Comentarios  

# Site De Casino 25-10-2017 22:24
E também além do mais, a humanidade eles geram efeitos prejudiciais?
Responder
Facebook Mundonets Twitter Mundonets Google Plus Mundonets