Skip to content

Instantly share code, notes, and snippets.

@taesheren

taesheren/dabblet.css

Created February 10, 2012 04:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taesheren/1786416 to your computer and use it in GitHub Desktop.
Save taesheren/1786416 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS3 box-shadow page curl effect by Matt Hamm | http://matthamm.com/box-shadow-curl.html
Raw
dabblet.css
/*
* Pure CSS3 box-shadow page curl effect by Matt Hamm | http://matthamm.com/box-shadow-curl.html
*/
ul.box {
position: relative;
float: left;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 10px 10px;
padding: 5px;
}
ul.box li {
position: relative;
width: 210px;
height: 110px;
padding: 20px;
border: 1px solid #efefef;
margin: 0 0 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul class="box">
<li>Hello</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment