CSS drop-shadows without images


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



Copy this code and paste it in your HTML
  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. }
  33. .drop-shadow {
  34. -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
  35. border-radius: 0 0 120px 120px / 0 0 6px 6px;
  36. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.