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

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)