Posted By

CKOink on 02/24/12


Tagged

page CSS3 Curls


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

pixelslave


CSS3 Page Curls


 / Published in: HTML
 

Using css3 to create page curl illusion on box elements

  1. HTML ====================================
  2.  
  3. <div class="box">
  4. </div>
  5.  
  6.  
  7. CSS======================================
  8.  
  9. .box {
  10. position:realtive;
  11. width:500px.
  12. height:330px;
  13. margin:0 auto;
  14. background-color:#fff;
  15. -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  16. -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  17. box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  18.  
  19.  
  20. .box:before, .box:after {
  21. position: absolute;
  22. width: 40%;
  23. height: 10px;
  24. content: ' ';
  25. left: 12px;
  26. bottom: 12px;
  27. background: transparent;
  28. -webkit-transform: skew(-5deg) rotate(-5deg);
  29. -moz-transform: skew(-5deg) rotate(-5deg);
  30. -ms-transform: skew(-5deg) rotate(-5deg);
  31. -o-transform: skew(-5deg) rotate(-5deg);
  32. transform: skew(-5deg) rotate(-5deg);
  33. -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  34. -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  35. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  36. z-index: -1;
  37. }
  38.  
  39. .box:after {
  40. left: auto;
  41. right: 12px;
  42. -webkit-transform: skew(5deg) rotate(5deg);
  43. -moz-transform: skew(5deg) rotate(5deg);
  44. -ms-transform: skew(5deg) rotate(5deg);
  45. -o-transform: skew(5deg) rotate(5deg);
  46. transform: skew(5deg) rotate(5deg);
  47. }

Report this snippet  

You need to login to post a comment.