Mar 19, 2010

Page curl, fold or peel effect with pure css

As you know i avoid JavaScript as much as i can, reason is simple - It force me to think out of the box and even more creatively. And lets me to unbound the power of CSS. Today we are here to learn a cool page peel, or page fold effect with pure css.

If you search for the same thing on web, there are a lot of Jquery plugins or you can learn to make it with Mootools.

Idea

Its simply simple as ever -
Two elements; Code Div and fold Image grow in size when hover, with ease (It depends on your web browser).

Code

HTML

<div id="code">code here

<img id="curl" src="fold.png">

</div> 

CSS

 #curl{

    width:40px;
    height:40px;
    position:fixed;
    top:0;
    left:0;
}
#curl:hover{
    width:300px;
    height:300px;
     -webkit-transition: ease 1s;
     -moz-transition: ease 1s;
}
#code{
    background:#fffff;
    overflow:hidden;
    width:35px;
    height:35px;
    position:fixed;
    top:0;
    left:0;
}
#code:hover{
    width:250px;
    height:250px;
    -webkit-transition: ease 1s;
    -moz-transition: ease 1s;
} 

Demo

You can see this cool effect at top-left corner of this page. you wud found it more cool with chrome like browsers.

Labels: Animation, css, Tip, Tutorials

By : Motyar+ @motyar