Motyar

Freelance Web Developer

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-transitionease 1s;
     -moz-transitionease 1s;
}
#code{
    background:#fffff;
    overflow:hidden;
    width:35px;
    height:35px;
    position:fixed;
    top:0;
    left:0;
}
#code:hover{
    width:250px;
    height:250px;
    -webkit-transitionease 1s;
    -moz-transitionease 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.
<html lang="en">
<
head>
    <
meta http-equiv="       Content-Type" content="text/html; charset=UTF-8">
    <
title>Motyar dot com</title>
    <
link rel="shortcut icon" href="favicon.ico">
    <
link rel="icon" type="image/ico" href="favicon.ico">    <meta name="author" content="Dharmveer Motyar">
    <
meta name="keywords" content="dharmmotyar, motyar,web developer, Php,Jquery, HTML, CSS"

Labels: , , ,


By :