advanced code snippet search

Posted By

bdiddymc on 01/25/11


Tagged

curl css class page shadow less


Versions (?)

Who likes this?

8 people have marked this snippet as a favorite

dattaproffs
f1r3fl3x
jackomono
wirenaught
variantstudios
secretgspot
shalomfriss
ringo380


LESS - Page Curl

 / Published in: CSS
 

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:

  • 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(); }

Expand | Embed | Plain Text 
  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  

You need to login to post a comment.