How to Create CSS3 Paper Curls Without Images

Sir Codex

10 years ago

Paper curls have been popular for a few years. The viewer sees a natural-looking slightly curved box but, in reality, it’s an optical illusion created by a shadow at the bottom of the element:

Until recently, you’d need to create the shadow as an image in Photoshop, Gimp or another graphics package. Ideally, it would be a 24-bit alpha transparent PNG which could be overlaid on any background — but that would cause issues in older browsrs.

Fortunately, CSS3 provides a great alternative with several benefits:

The effect works in modern browsers but won’t be applied in browsers which don’t support it.
The shadow can be overlaid on any background without requiring additional images.
The effect can be applied to elements of any size.
The code is reusable and uses far fewer bytes than an image-based shadow.
The shadow is easy to configure. You can change the color or depth with a few code tweaks.

First, let’s create our single HTML element:


<div class="box">My box</div>

and apply a little shading to the inside and outside:


.box
{
	position: relative;
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	-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);
}

We now need curl effects on the bottom left and right edges. This is achieved by creating two :before and :after pseudo-elements which are:

rotated and skewed using CSS3 transforms (all the latest browsers support transforms with vendor prefixes)
positioned at the bottom edge, and
given a box shadow.

We can now move the elements behind the main box using z-index: -1. Therefore, just the edge of their shadow becomes visible:

The pseudo-element CSS code:


.box:before, .box:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-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;
} 

.box:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

That’s a lot of vendor-prefixed code to achieve an effect, but it requires fewer bytes and HTTP requests than a graphic.

Source Link: http://www.sitepoint.com/pure-css3-paper-curls/