Escala de grises CSS3

Un pequeno cheat, para quienes buscamos poner una imagen en escala de grises, del tipo

 

 

 

Sin mas ni mas, ahi les dejo el codigo

 

-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */

Por si acaso les llegara a dar lata en firefox, utilizemos este fix

 

  filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */

Con ese fix jala de awe#o, Salu2

Back to Top