Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

CSS Box Shadow


 / Published in: CSS
 

  1. /* Used in casting shadows off block-level elements (like divs). */
  2.  
  3. .shadow {
  4. -moz-box-shadow: 5px 5px 5px #ccc;
  5. -webkit-box-shadow: 5px 5px 5px #ccc;
  6. box-shadow: 5px 5px 5px #ccc;
  7. }
  8.  
  9. /*
  10. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  11. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  12. The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  13.  
  14. Color
  15.  
  16. Example
  17. Inner Shadow
  18. */
  19.  
  20. .shadow {
  21. -moz-box-shadow:inset 0 0 10px #000000;
  22. -webkit-box-shadow:inset 0 0 10px #000000;
  23. box-shadow:inset 0 0 10px #000000;
  24. }
  25.  
  26. /*
  27. Example
  28. Internet Explorer Box Shadow
  29.  
  30. You need extra elements...
  31. */
  32.  
  33. <div class="shadow1">
  34. <div class="content">
  35. Box-shadowed element
  36. </div>
  37. </div>
  38.  
  39. .shadow1 {
  40. margin: 40px;
  41. background-color: rgb(68,68,68); /* Needed for IEs */
  42.  
  43. -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  44. -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  45. box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  46.  
  47. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  48. -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  49. zoom: 1;
  50. }
  51. .shadow1 .content {
  52. position: relative; /* This protects the inner element from being blurred */
  53. padding: 100px;
  54. background-color: #DDD;
  55. }

Report this snippet  

You need to login to post a comment.