/*
 * Page Curl
 *
 * Inspired by the work of matt hamm:
 * http://matthamm.com/box-shadow-curl.html
 */
 
.page-curl () {
position: relative;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 

	:after {
		z-index: -1;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		right: 10px;
		bottom: 10px;
		-webkit-transform: skew(15deg) rotate(5deg);
		-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
		-moz-transform: skew(15deg) rotate(5deg);
		-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
	}
	
	:before {
		z-index: -2;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		left: 10px;
		bottom: 10px;
		-webkit-transform: skew(-15deg) rotate(-5deg);
		-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
		-moz-transform: skew(-15deg) rotate(-5deg);
		-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); 
	}
}

/*
 * Page Curl
 *
 * http://matthamm.com/box-shadow-curl.html
 */
 
.page-curl () {
position: relative;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); 

	:after {
		z-index: -1;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		right: 10px;
		bottom: 10px;
		-webkit-transform: skew(15deg) rotate(5deg);
		-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
		-moz-transform: skew(15deg) rotate(5deg);
		-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
	}
	
	:before {
		z-index: -2;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		left: 10px;
		bottom: 10px;
		-webkit-transform: skew(-15deg) rotate(-5deg);
		-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
		-moz-transform: skew(-15deg) rotate(-5deg);
		-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); 
	}
}

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

LESS - Page Curl

curl, css, class, page

CSS