Revision: 40039
Updated Code
at January 25, 2011 10:16 by bdiddymc
Updated Code
/*
* 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);
}
}
Revision: 40038
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at January 25, 2011 09:53 by bdiddymc
Initial Code
/*
* 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);
}
}
Initial URL
Initial Description
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();
}*
Initial Title
LESS - Page Curl
Initial Tags
curl, css, class, page
Initial Language
CSS