CSS3 Page curl effect

CSS3 Page curl effect

It continues to amaze me what’s possible with CSS3’s new (well, not so new anymore) properties.

Here’s little page curl effect I made with one div, gradients, box-shadows, pseudo-selectors, transition & translate.

Demo

The page curl effect itself consists of one div. The box-shadows are based on a demo by Matt Hamm.

The goods

The HTML

<div class="curl"></div>

And the CSS (without vendor prefixes)

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,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, 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, 0.3);
}

Get the Gist

CodePen