Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

Page Curl Shadows


 / Published in: CSS
 

  1. .page-curl {
  2. position: relative;
  3. background: #ffffff;
  4. background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  5. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
  6. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
  7. -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  8. -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  9. }
  10.  
  11. .page-curl:after {
  12. z-index: -1;
  13. position: absolute;
  14. background: transparent;
  15. width: 70%;
  16. height: 55%;
  17. content: '';
  18. right: 10px;
  19. bottom: 10px;
  20. -webkit-transform: skew(15deg) rotate(5deg);
  21. -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
  22. -moz-transform: skew(15deg) rotate(5deg);
  23. -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
  24. }
  25.  
  26. .page-curl:before {
  27. z-index: -2;
  28. position: absolute;
  29. background: transparent;
  30. width: 70%;
  31. height: 55%;
  32. content: '';
  33. left: 10px;
  34. bottom: 10px;
  35. -webkit-transform: skew(-15deg) rotate(-5deg);
  36. -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
  37. -moz-transform: skew(-15deg) rotate(-5deg);
  38. -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
  39. }
  40.  
  41. /* Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up. */

Report this snippet  

You need to login to post a comment.