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


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your 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. */

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.