Cross-browser gråtoning af billeder med CSS
Kulturstyrelsen har et nydeligt website med gråtonede fotos, der bliver til farvefotos, når man fører musen henover.
Her er teknikken til at opnå den effekt på tværs af Firefox 10+, Internet Explorer 6 - 9, Chrome 19+ og Safari 6+.
[css wraplines="false" collapse="false"] a img { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } [/css]
Og sådan deaktiveres effekten igen, f.eks. ved :hover.
[css wraplines="false" collapse="false"] a:hover img { filter: none; -webkit-filter: grayscale(0%); } [/css]