Webdesign készítése során sokszor használunk árnyékot bizonyos területek kiemelésére. A CSS3 előtti időszakban ilyen esetben már a grafikai tervezés során a kiemelendő terület szélén lévő grafika elemre illesztettük az árnyékot. Ez plusz kép betöltődést jelent, mely lassítja az oldal megjelenését.
A CSS3 szabvány bevezetésével ezek a grafikai megoldások gyorsabban, egyszerűbben megoldhatóak. Néhány böngésző ugyan nem támogatja a CSS3-at, így pl. az Internet Explorer 8 és korábbi változatai sem, de van lehetőség külön IE által értelmezhető utasítást megadni.
.boxClass
{
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
box-shadow: 3px 3px 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
A megadott értékek magyarázata a CSS3 értékadásra vonatkozóan:
- 3px: eltolás vízszintesen;
- 3px: eltolás függőlegesen;
- 5px: elmosás mértéke;
- #000: árnyék színe
Példa egy div elem árnyék megadására:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non orci in est imperdiet ullamcorper a bibendum mi. Sed iaculis pretium magna quis consectetur. Aliquam malesuada arcu ac dolor mattis fermentum. Cras imperdiet egestas erat vitae pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.