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]
Læs også:
Billeder, der passer til skærmen - 6 teknikker
Looking for an English translation? De fleste websteder er fyldt med billeder. Der vises billeder på den store fladskærm og der vises billeder på den lille mobiltelefon. Det er bare ikke smart at hive store, tunge fladskærmsbilleder ned på den lille mobilskærm over en 3g…
Læs mere ...Placeholder billeder til web layout
I udvikling af HTML mock ups og layouts til webdesign, har man ofte brug for dummy billeder til visning der, hvor det færdige site skal spytte billeder ud. Der findes en del tjenester, der kan hjælpe, så man slipper for at beskære billeder i Photoshop.
Læs mere ...