Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A CodePen by Joost Kiens. CSS Page curl - CSS Page curl with one div.
<div class="curl"></div>
<h1>CSS Page Curl</h1>
<p>hover over page curl to resize</p>
/**
* Author: @joostkiens
* Licensed under the MIT license
*/
body {
background: steelblue;
}
.curl {
width:120px;
height:120px;
position: absolute;
top:0;
left:0;
background :
linear-gradient(
135deg,
#fff,
#f3f3f3 45%,
#ddd 50%,
#aaa 50%,
#bbb 56%,
#ccc 62%,
#f3f3f3 80%,
#fff 100%
);
box-shadow : 0 0 10px rgba(0, 0, 0, .5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-15deg) rotate(-84deg);
}
.curl:hover {
width: 240px;
height: 240px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}
h1 {
text-align: center;
font-size: 8em;
text-transform: uppercase;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
color: white;
margin: 0.5em 0 0.25em;
padding: 0;
}
p {
text-align: center;
font-weight: bold;
color: lightblue;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment