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.
Fra farvebillede til gråtonebillede med CSS

Her er teknikken til at opnå den effekt på tværs af Firefox 10+, Internet Explorer 6 – 9, Chrome 19+ og Safari 6+.

a img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

Og sådan deaktiveres effekten igen, f.eks. ved :hover.

a:hover img {
    filter: none;
    -webkit-filter: grayscale(0%);
}

Mere om CSS filtre og hvordan de fungerer her.

Skriv en kommentar

This site uses Akismet to reduce spam. Learn how your comment data is processed.