Posted By

apphp-snippets on 03/05/13


Tagged

css shadow


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Abiotic


Show Box Shadow in CSS


 / Published in: CSS
 

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

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.

  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>

Report this snippet  

You need to login to post a comment.