Skip to content

Instantly share code, notes, and snippets.

@apphp-snippets
Created November 4, 2012 20:21
Show Gist options
  • Select an option

  • Save apphp-snippets/4013527 to your computer and use it in GitHub Desktop.

Select an option

Save apphp-snippets/4013527 to your computer and use it in GitHub Desktop.
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 radiu
<style type="text/css">
/* Source: http://www.apphp.com/index.php?snippet=css-box-shadow */
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment