Advanced Search

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