Posted By

robnilas on 01/21/17


Tagged


Versions (?)

Paper Effect CSS3 box shadows


 / Published in: CSS
 

  1. body {
  2. padding:1em;
  3. font-family:sans-serif;
  4. background:#eee;
  5. }
  6.  
  7. /* Layered Paper */
  8. .layers {
  9. text-align: center;
  10. padding:1.618em;
  11. margin-bottom:1.618em;
  12. font-weight: bold;
  13. margin:1em;
  14.  
  15. background: #fff;
  16. box-shadow:
  17. 0 1px 1px rgba(0,0,0,0.25), /* The top layer shadow */
  18. 0 10px 0 -5px #fff, /* The second layer */
  19. 0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
  20. 0 20px 0 -10px #fff, /* The third layer */
  21. 0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
  22. }

Report this snippet  

You need to login to post a comment.