Thursday, August 20, 2009

CSS3 Box Shadows

CSS3 supports a new "box-shadow" property that makes light work of adding shadows to elements on your page, such as images, DIVs and SPANs.

The feature is supported in FF3.5, Safari 3.1+, and Google Chrome, albeit all via vendor specific versions of this property. And while IE (as of IE8) has not yet to jump on board.

Example:



<style type="text/css">
.shadow1{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
}
</style>

<div class="shadow1" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>

For image example, please see my portfolio.

0 comments:

Post a Comment