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

data:image/svg+xml;utf8, ,<, svg="" xmlns="\'http://www.w3.org/2000/svg\'">,<,filter id="\'grayscale\'">,<,fecolormatrix 0="" 1="" 0.3333="" type="\'matrix\'" values="\'0.3333">#grayscale

<, svg="" xmlns="\'http://www.w3.org/2000/svg\'"><,filter id="\'grayscale\'"><,fecolormatrix 0="" 1="" 0.3333="" type="\'matrix\'" values="\'0.3333">Aqui le puse el primer tag del svg con 2 comas, puesto que se reconocia como etiquena normal, algun bug que tengo y me da weba resolver ahora mismo, asi que pues;  quiten las comas del tag y utilizenlo como debe ser,  cambiar utf8, ,<, svg  por  utf8, <svg  y asi con las demas que esten  del tipo ,<, con ese fix jala de awe#o, Salu2

 

 

Back to Top