Show Box Shadow in CSS
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.
[View All Snippets]
[View All Snippets]
Show Plain Text »
Result for FF and Chrome:
Trick for IE:
- <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>
Result for FF and Chrome:
This is a Box-shadowed element.
Trick for IE:
This is a Box-shadowed element.