ugrás a tartalomhoz

Kaméleon ikonok CSS segítségével

Hojtsy Gábor · 2006. Feb. 8. (Sze), 20.21
Bizonyára már sok olvasónk szembesült azzal a problémával, hogy új színvilágot kellett bevezetnie egy weblapon, akár szezonális, akár miniwebhely kifejlesztési igények miatt. Egy-egy termék saját webhelye egy cégen belül is igényelhet különböző színvilágot, legalábbis apró eltéréseket. Réges-régen Dan Cederholm publikálta azt a tippet, mely arra buzdít bennünket, hogy fehér színnel vigyük fel a mintát egy egyébként átlátszó képre. Emögé aztán bármilyen háttérszínt tehetünk, aminek hatására a fehéren hagyott területek megjelennek.

Dan technikája már klasszikusnak mondható, erre építve jelentette meg a napokban Clearbits nevű ingyenesen letölthető ikongyűjteményét P.J. Onori. Mindössze annyit bővített az eredeti ötleten, hogy az ikonok lekerekítését is egy háttérkép segítségével oldja meg, így bármely ikon lekerekítése változtatható a színtől függetlenül is.

Érdemes megjegyezni, ahogy Dan is kifejtette annak idején, hogy ha a képek betöltődnek de a CSS nem, akkor (legalábbis fehér alapon) láthatatlan ikonokat kapunk, ami nem túl barátságos a felhasználó számára. Ennek a technikának az alkalmazásakor ezzel a következménnyel együtt kell élni.