Posted By

johnloy on 02/24/10


Tagged

css effects ui


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

luman
tamala73


Cross-browser image-less drop-shadow with box shadow


 / Published in: CSS
 

URL: http://www.neteye.de/articles/box-shadow.html

  1. /* http://www.neteye.de/articles/box-shadow.html */
  2. .shadow {
  3. _height: 1px;
  4. box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  5. -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  6. -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  7. filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5,MakeShadow=true,ShadowOpacity=0.5);
  8. background: #000\9
  9. }
  10.  
  11. .shadow-content {
  12. background: #fff;
  13. position: relative;
  14. top: 2px;
  15. left: 2px;
  16. }
  17.  
  18. div.shadow-content {
  19. background: #eee;
  20. padding: 20px;
  21. }
  22.  
  23. .inline-block {
  24. line-height: 1px;
  25. display: -moz-inline-stack;
  26. display: inline-block;
  27. vertical-align: middle;
  28. }
  29.  
  30. /*
  31. In order to add a shadow to an arbitrary element, we have to wrap it inside an element with the shadow class and assign the shadow-content class to the element itself:
  32.  
  33. <div class="shadow">
  34.   <div class="shadow-content">Hello World</div>
  35. </div>
  36. */

Report this snippet  

You need to login to post a comment.