Return to Snippet

Revision: 62668
at March 5, 2013 20:13 by apphp-snippets


Initial Code
<style type="text/css">
.shadow {
    -moz-box-shadow: 4px 5px 5px 1px #777;
    -webkit-box-shadow: 4px 5px 5px 1px #777;
    box-shadow: 4px 5px 5px 1px #777;
}
 
.shadowIE {
    background-color:#f5f5f5; /* need for IE*/
    -moz-box-shadow: 4px 5px 5px 1px #777;
    -webkit-box-shadow: 4px 5px 5px 1px #777;
    box-shadow: 4px 5px 5px 1px #777;
    filter: progid:DXImageTransform.Microsoft.Blur
    (PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur
     (PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}
.shadowIE .content {
    position:relative; 
    background-color:#f5f5f5;
}
</style>
 
<div class="shadow">
    This is a Box-shadowed element.
</div>
 
<div class="shadowIE">
    <div class="content">
        This is a Box-shadowed element.
    </div>
</div>

Initial URL
http://www.apphp.com/index.php?snippet=css-box-shadow

Initial Description
This can be used in casting shadows off block-level elements like divs, tables etc. (still not supported in IE7 and IE8). Parameters (from left to right): horizontal offset of the shadow, vertical offset of the shadow, blur radius (optional), spread radius (optional), color.

Initial Title
Show Box Shadow in CSS

Initial Tags
css

Initial Language
CSS