estadisticas
 
 
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

Nota: Los comentarios escritos en mayúsculas o tipo SMS serán eliminados, al igual que los comentarios ofensivos o sin educación contra los lectores y/o editores de este medio.

También pueden reportar los comentarios ofensivos para ser borrados.

Código de seguridad
Refescar