Forcing Grayscale Printing
At the time of this writing, this will only work in Chrome 18+, but it's standardized so support will eventually come to everywhere.
@media print {
body {
/* IE4-8 and 9 (deprecated). */
filter: Gray();
/* SVG version for IE10, Chrome 17, FF3.5,
Safari 5.2 and Opera 11.6 */
filter: url('#grayscale');
/* CSS3 filter, at the moment Webkit only. Prefix it for
future implementations */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* future-proof */
}
}
I’m looking forward to:
Dave, I made something similar here.
Dave: Just do {filter: grayscale(0%); } and you can also use transitions. Check out this dabblet: http://dabblet.com/gist/2916403
I was trying to use this code in my blog social icons but it’s not working well:
Chrome – great result, the icon appears in grayscale
IE – the icon appears with color
Firefox – the icon doesn’t appear at all
I think it’s this line that doesn’t work:
I have the svg filter when the body tag opens as defined in the referenced url.
Any idea how to solve it?
for me its not working for IE10 how to make it for IE10