Page Curl Box Shadow Experiment

Posted in Experiments.

I’ve seen this effect done plenty of times using images, so I set out to create the “page curl” shadow effect using only CSS. I like the depth it creates, giving the illusion that the corners of the box are slightly lifting off the page.

To achieve the effect, I used the :before and :after pseudo-elements to create the shadows and eliminate the need for extra markup. I then applied a box shadow and transform to them, and positioned them as needed.

I created several variations, with shadows on both sides, one side only, and the top & bottom of one side to show various effects.

As an extra measure, I added a linear-gradient to each box to give it some “shading” on the side that is supposedly lifting off the page.

I think this is simple, but effective way to add some depth to your designs. This effect should work in IE9+, with the linear gradient working in IE10+

View Example

Source ode

HTML

<div class="page-curl shadow-bottom">
	<h2>Bottom shadow, both sides</h2>
	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>

<div class="page-curl shadow-bottom shadow-right">
	<h2>Bottom shadow, right side</h2>
	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>

<div class="page-curl shadow-bottom shadow-left">
	<h2>Bottom shadow, left side</h2>
	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>

<div class="page-curl shadow-top-bottom shadow-right">
	<h2>Top & Bottom shadow, right side</h2>
	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>

<div class="page-curl shadow-top-bottom shadow-left">
	<h2>Top & Bottom shadow, left side</h2>
	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

html {
	background: #DEF;
	background: -moz-linear-gradient(45deg, #EFF, #DEF);
	background: -ms-linear-gradient(45deg, #EFF, #DEF);
	background: -webkit-linear-gradient(45deg, #EFF, #DEF);
	background: linear-gradient(45deg, #EFF, #DEF);
	min-height: 100%;
	font-family: "Open Sans", Helvetica, sans-serif;
	font-weight: 300;
}

h1, h2 {
	font-weight: 400;
	text-shadow: 0 1px 0 #FFF;
}

h1 {
	width: 800px;
	margin: 0 auto;
}

p {
	font: 300 13px/20px Arial,sans-serif;
	color: #888;
}

.page-curl {
	background: #FFFFFF;
	background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
	background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
	background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
	background: linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);
	border: 1px solid #777777;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	margin: 50px auto;
	padding: 15px;
	position: relative;
	width: 800px;
}

.page-curl:before, .page-curl:after {
	background: none;
	bottom: 12px;
	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	content: "";
	height: 10px;
	left: 12px;
	position: absolute;
	width: 40%;
	z-index: -1;
	-moz-transform: skew(-4deg) rotate(-4deg);
	-webkit-transform: skew(-4deg) rotate(-4deg);
	transform: skew(-4deg) rotate(-4deg);
}

.page-curl:after {
	-moz-transform: skew(4deg) rotate(4deg);
	-webkit-transform: skew(4deg) rotate(4deg);
	transform: skew(4deg) rotate(4deg);
	left: auto;
	right: 12px;
}

.page-curl.shadow-left {
	background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
	background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
	background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
	background: linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
}

.page-curl.shadow-right {
	background: -moz-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
	background: -ms-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
	background: -webkit-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
	background: linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
}

.shadow-bottom:before, .shadow-bottom:after {
	top: auto;
	bottom: 12px;
	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
}

.shadow-left:after {
	display: none;
}

.shadow-right:before {
	display: none;
}

.shadow-top-bottom.shadow-left:after {
	display: block;
	bottom: auto;
	top: 15px;
	right: auto;
	left: 12px;
	-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}

.shadow-top-bottom.shadow-right:before {
	display: block;
	bottom: auto;
	top: 15px;
	right: 12px;
	left: auto;
	-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}

One Response to “Page Curl Box Shadow Experiment”

  1. Gary

    Hey Chris,

    Thanks for showing the above! I have applied the technique to a site I am working on (my Wife’s) and would like to use it when the site goes live. It’s tagged “Experimental” so wondered if you feel it’s OK for a live site?

    Many thanks! :)

    –Gary

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>