Sass mixin to create the paper curls (pure CSS3) effect. The effect was originally introduced by one the following brilliant persons: http://nimbupani.com/drop-shadows-with-css3.html or http://www.matthamm.com/box-shadow-curl.html. Here is an example how the effect will look like: http://blogs.sitepointstatic.com/examples/tech/css3-paper-curl/in…

_paper-curls.scss

@mixin paper-curls(
	$skew: 5deg, 
	$rotate: 5deg, 
	$width: 40%, 
	$height: 10px) 
{
	position: relative;		
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	
	&:before, &:after
	{
		position: absolute;
		width: $width;
		height: $height;
		content: ' ';
		left: 12px;
		bottom: 12px;
		background: transparent;
		-webkit-transform: skew($skew * -1) rotate($rotate * -1);
		-moz-transform: skew($skew * -1) rotate($rotate * -1);
		-ms-transform: skew($skew * -1) rotate($rotate * -1);
		-o-transform: skew($skew * -1) rotate($rotate * -1);
		transform: skew($skew * -1) rotate($rotate * -1);
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		z-index: -1;
	}

	&:after
	{
		left: auto;
		right: 12px;
		-webkit-transform: skew($skew) rotate($rotate);
		-moz-transform: skew($skew) rotate($rotate);
		-ms-transform: skew($skew) rotate($rotate);
		-o-transform: skew($skew) rotate($rotate);
		transform: skew($skew) rotate($rotate);
	}
}

This is great, but for some odd reason, it won't display unless I disable the z-index. But the the shapes display over my objects.