Kerekített sarkok, színátmenet és árnyék CSS-el

Progressive Internet Explorer - így olvasható a css3pie.com szlogenje. Megoldódni látszik a kerekített sarkok problémája egészen az explorer 6-ig visszamenőleg. Bár még jelen pillanatban beta 2-es verziójú a megoldás de kétségtelenül a legjobbnak tűnik: nem használ képet a kerekített sarkokhoz. Egy .htc fájlt kell a style sheet-be belinkelni egészen egyszerűen:

behavior: url(PIE.htc)

Utána megadni a kerekítés mértékét a különböző böngészőkhöz:

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

Színátmene:

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);

A doboz árnyéka:

-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;

A css3pie.com-on kitűnő demó program van elhelyezve ami még a css kódot is megírja ha meg vagyunk elégedve a látvánnyal. Nem csak dobozoknál lehet alkalmazni a megoldást, tab-os menüknél is jól jöhet. A nagy meglepetés, hogy Explorer 6-oson is kitűnően működik. A Horgász.hu hazai halak menüje: