Dynamic Drive CSS Library- CSS only Page Curl Effect

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: CSS3 demos: Other: Here

CSS only Page Curl Effect

Author: Dynamic Drive

This CSS example shows how to create a fully functional page curl effect using CSS3 only. Move your mouse over the curl, and it peels back to reveal content underneath. A quick breakdown on the making of the effect: We use a :after pseudo element plus CSS3 gradients/ shadows to render the curl itself. Then, on the :hover state, we merely enlarge the curl's outer container dimensions to create the illusion of the curl peeling back.

This Page Curl effect can easily be made responsive, by modifying its dimensions before and during the :hover state using CSS media queries at the desired breaking points.

Demo (move your mouse over the page curls at the top):

The CSS:

<style>

.curl{
  width: 60px; /* default width of page curl */
  height: 60px; /* default height of page curl */
  position: absolute;
  left: 0;
  top: 0;
	z-index: 1000;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 10px gray;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.curl .curlcontent{
  position: absolute;
  left: 15px; /* left position of curl content to show */
  top: 15px; /* top position of curl content to show */
}

.curl:after{ /* the curl itself */
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: rotate(45deg) translateX(70%) scale(1.4);
  background: #afafaf;
  background: -moz-linear-gradient(left,  #afafaf 0%, #ffffff 29%);
  background: -webkit-linear-gradient(left,  #afafaf 0%,#ffffff 29%);
  background: linear-gradient(to right,  #afafaf 0%,#ffffff 29%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 );

}

.curl:hover{
  width: 100px; /* width of page curl when mouse over */
  height: 100px; /* height of page curl when mouse over */
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  box-shadow: 10px 10px 50px gray;
}

/* #### Right corner curl specific CSS (instead of default left corner) ### */

.curl.rightcorner{
  left: auto;
  right: 0;
}

.curl.rightcorner:after{
  left: auto;
  right: 0;
  transform: rotate(135deg) translateX(70%) scale(1.4);  
}

.curl.rightcorner .curlcontent{
  left: auto;
  right: 15px; /* right position of curl content to show */
  top: 15px; /* top position of curl content to show */
}

</style>

<!--[if lte IE 8]>
<style>

.curl{
	display: none;
}

</style>
<![endif]-->

The HTML (place this as a child of the BODY or a positioned element):

<!-- onclick event inside DIV needed for iOS to respond to :hover -->
  <div class="curl" onclick="">
	<div class="curlcontent">
	<a href="http://www.dynamicdrive.com"><img src="media/down.png" style="width:36px;height:36px" /></a>
	</div>
</div>

<div class="curl rightcorner" onclick="">
	<div class="curlcontent">
	<a href="http://www.dynamicdrive.com"><img src="media/searchone.png" style="width:36px;height:36px" /></a>
	</div>
</div>

Code Info

Rate this code:

Date Posted: 11/29/2015

Revision History: None

Usage Terms: Click here