CSS3 box-shadow with page curl effect


/ Published in: Other



Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. ul.box {
  5. margin: 0;
  6. padding: 0; }
  7.  
  8. ul.box li {
  9. list-style-type: none;
  10. margin: 0 30px 30px 0;
  11. padding: 0;
  12. width: 250px;
  13. height: 150px;
  14. border: 1px solid #efefef;
  15. position: relative;
  16. float: left;
  17. background: #ffffff; /* old browsers */
  18. background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
  19. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
  20. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
  21. -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  22. -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
  23.  
  24. ul.box li:after {
  25. z-index: -1;
  26. position: absolute;
  27. background: transparent;
  28. width: 70%;
  29. height: 55%;
  30. content: '';
  31. right: 10px;
  32. bottom: 10px;
  33. -webkit-transform: skew(15deg) rotate(5deg);
  34. -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
  35. -moz-transform: skew(15deg) rotate(5deg);
  36. -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }
  37.  
  38. ul.box li:before {
  39. z-index: -2;
  40. position: absolute;
  41. background: transparent;
  42. width: 70%;
  43. height: 55%;
  44. content: '';
  45. left: 10px;
  46. bottom: 10px;
  47. -webkit-transform: skew(-15deg) rotate(-5deg);
  48. -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
  49. -moz-transform: skew(-15deg) rotate(-5deg);
  50. -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }
  51. <body><!-- source: http://matthamm.com/box-shadow-curl.html -->
  52. <ul class="box">
  53. <li></li>
  54. <li></li>
  55. <li></li>
  56. <li></li>
  57. <li></li>
  58. <li></li>
  59. </ul>
  60. </body>
  61. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.