Pure CSS3 box-shadow page curl effect

SUBMITTED BY: Guest

DATE: May 2, 2013, 6:11 p.m.

FORMAT: Text only

SIZE: 1.9 kB

Raw Download

HITS: 1470

Report
  1. - HTML---------------------------------------------------------------------------
  3. <ul class="box">
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. <li></li>
  9. <li></li>
  10. </ul>
  13. - CSS ---------------------------------------------------------------------------
  15. ul.box {
  16. position: relative;
  17. z-index: 1; /* prevent shadows falling behind containers with backgrounds */
  18. overflow: hidden;
  19. list-style: none;
  20. margin: 0;
  21. padding: 0; }
  24. ul.box li {
  25. position: relative;
  26. float: left;
  27. width: 250px;
  28. height: 150px;
  29. padding: 0;
  30. border: 1px solid #efefef;
  31. margin: 0 30px 30px 0;
  32. background: #fff;
  33. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  34. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  35. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
  38. ul.box li:before,
  39. ul.box li:after {
  40. content: '';
  41. z-index: -1;
  42. position: absolute;
  43. left: 10px;
  44. bottom: 10px;
  45. width: 70%;
  46. max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  47. max-height: 100px;
  48. height: 55%;
  49. -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  50. -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  51. box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  52. -webkit-transform: skew(-15deg) rotate(-6deg);
  53. -moz-transform: skew(-15deg) rotate(-6deg);
  54. -ms-transform: skew(-15deg) rotate(-6deg);
  55. -o-transform: skew(-15deg) rotate(-6deg);
  56. transform: skew(-15deg) rotate(-6deg); }
  59. ul.box li:after {
  60. left: auto;
  61. right: 10px;
  62. -webkit-transform: skew(15deg) rotate(6deg);
  63. -moz-transform: skew(15deg) rotate(6deg);
  64. -ms-transform: skew(15deg) rotate(6deg);
  65. -o-transform: skew(15deg) rotate(6deg);
  66. transform: skew(15deg) rotate(6deg); }
comments powered by Disqus