Posted By

rydonahue on 07/07/11


Tagged


Versions (?)

CSS3 Paper Shadow


 / Published in: CSS
 

URL: http://nicolasgallagher.com/css-drop-shadows-without-images/

Fancy paper shadow effect

  1. .drop-shadow {
  2. position:relative;
  3. width:90%;
  4. }
  5.  
  6. .drop-shadow:before,
  7. .drop-shadow:after {
  8. content:"";
  9. position:absolute;
  10. z-index:-1;
  11. bottom:15px;
  12. left:10px;
  13. width:50%;
  14. height:20%;
  15. max-width:300px;
  16. -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  17. -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  18. box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  19. -webkit-transform:rotate(-3deg);
  20. -moz-transform:rotate(-3deg);
  21. -o-transform:rotate(-3deg);
  22. transform:rotate(-3deg);
  23. }
  24.  
  25. .drop-shadow:after{
  26. right:10px;
  27. left:auto;
  28. -webkit-transform:rotate(3deg);
  29. -moz-transform:rotate(3deg);
  30. -o-transform:rotate(3deg);
  31. transform:rotate(3deg);
  32. }

Report this snippet  

You need to login to post a comment.