Så gör du gråskaliga bilder cross-browser med CSS
Har ni som jag svurit över att det inte funnits något smidigt sätt att göra svartvita / gråskaliga bilder utan att behöva skapa dom i Photoshop?
Här har ni lösningen som är cross-browser säker nere till IE6 vilket är mer än bra.
Jag skapade här ett exempel med hover-effekt och lade även på CSS3 transition (nej, det är inte cross-browser) för en mjukare övergång.
Hoppas det kan spara hår och tid för någon annan.


img.gray {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
img.gray:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}
jsFiddle: http://jsfiddle.net/jarnesjo/ys2Lf/5/
jsFiddle resultat: http://jsfiddle.net/jarnesjo/ys2Lf/5/embedded/result/