Advanced Search

Show Box Shadow in CSS

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. .shadow {
  3.     -moz-box-shadow: 4px 5px 5px 1px #777;
  4.     -webkit-box-shadow: 4px 5px 5px 1px #777;
  5.     box-shadow: 4px 5px 5px 1px #777;
  6. }
  7.  
  8. .shadowIE {
  9.     background-color:#f5f5f5; /* need for IE*/
  10.     -moz-box-shadow: 4px 5px 5px 1px #777;
  11.     -webkit-box-shadow: 4px 5px 5px 1px #777;
  12.     box-shadow: 4px 5px 5px 1px #777;
  13.     filter: progid:DXImageTransform.Microsoft.Blur
  14.     (PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  15.     -ms-filter: "progid:DXImageTransform.Microsoft.Blur
  16.      (PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  17.     zoom: 1;
  18. }
  19. .shadowIE .content {
  20.     position:relative; 
  21.     background-color:#f5f5f5;
  22. }
  23. </style>
  24.  
  25. <div class="shadow">
  26.     This is a Box-shadowed element.
  27. </div>
  28.  
  29. <div class="shadowIE">
  30.     <div class="content">
  31.         This is a Box-shadowed element.
  32.     </div>
  33. </div>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.