Advanced Search

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

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

Expand | Embed | Plain Text

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.