LESS - Page Curl


/ Published in: CSS
Save to your folder(s)

A LESS class which can be included to easily allow for a page-curl/shadow on element.

*NOTE: Still needs work to allow for consistency at various sizes...*

**Usage Instructions**

* To remove reliance on javascript, setup the LESS compiler:
* [incident57.com/less/](http://incident57.com/less/) (MAC)
* ??? (PC)

* Import the class into the master stylesheet: *@import: url(classes.less);*

* Use page curl on specific elements:
*.block-item
{
height: 100px;
width: 300px;
.page-curl();
}*


Copy this code and paste it in your HTML
  1. /*
  2.  * Page Curl
  3.  *
  4.  * Inspired by the work of matt hamm:
  5.  * http://matthamm.com/box-shadow-curl.html
  6.  */
  7.  
  8. .page-curl () {
  9. position: relative;
  10. -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  11. -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  12.  
  13. :after {
  14. z-index: -1;
  15. position: absolute;
  16. background: transparent;
  17. width: 70%;
  18. height: 55%;
  19. content: '';
  20. right: 10px;
  21. bottom: 10px;
  22. -webkit-transform: skew(15deg) rotate(5deg);
  23. -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
  24. -moz-transform: skew(15deg) rotate(5deg);
  25. -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
  26. }
  27.  
  28. :before {
  29. z-index: -2;
  30. position: absolute;
  31. background: transparent;
  32. width: 70%;
  33. height: 55%;
  34. content: '';
  35. left: 10px;
  36. bottom: 10px;
  37. -webkit-transform: skew(-15deg) rotate(-5deg);
  38. -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
  39. -moz-transform: skew(-15deg) rotate(-5deg);
  40. -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
  41. }
  42. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.