counter
 
 
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:
 
 
 
Palabras Claves: escalas de grises lithograficas / escala de grise brillo imagen /

Comentarios  

0 #1 Site De Casino 25-10-2017 22:24
E também além do mais, a humanidade eles geram efeitos prejudiciais?
Citar

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

Ultimos Comentarios!

  • Baloto sábado 11 de noviembre 2017

    Pedro jaramillo Pedro jaramillo Sab 18/nov/2017
    Cuanto fue el premio para la revancha de dos números y la superbalota?

    Leer más...

  • Inscríbete en el “Factor XF” el próximo concurso del Canal RCN

    Laura Laura Sab 18/nov/2017
    Hola quisiera participar canto a dúo con mi hermano

    Leer más...

  • Chepe Fortuna Miercoles 27 de Abril Capitulo 185 Aníbal se posesiona como alcalde

    Rafael Blanquil Rafael Blanquil Sab 18/nov/2017
    Es Muy Buena la novela

    Leer más...

  • Inscripciones para “La Voz Kids 2017” del Canal Caracol

    charid caldera charid caldera Vie 17/nov/2017
    hola me yamo charid vanesa tengo 12años y me gustaria participar en la voz kids mi mama se yama yasmin ...

    Leer más...

  • Inscripciones abiertas para “La Voz Teens” del Canal Caracol

    JulianaAnduquia JulianaAnduquia Vie 17/nov/2017
    Me llamo juliana Anduquia Vinasco, tengo quince años y uno de mis mas grandes sueños se a vuelto ...

    Leer más...