http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/

dabblet.css

/* http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/ */

@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);


#header{
    position: absolute;
    z-index: 2000;
    width: 235px;
    top: 50px;
}
#header h1{
    font: 20px 'Gloria Hallelujah', cursive; 


    font-size: 20px;
    font-weight: 200;
   /* text-transform: uppercase; */
    color: rgba(255,255,255,0.9);
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    padding: 10px;
    background: #000;
}
#navigation {
    margin-top: 20px;
    width: 235px;
    display:block;
    list-style:none;
    z-index:3;
}
#navigation a{
    color: #444;
    display: block;
    background: #fff;
    background: rgba(255,255,255,0.9);
    line-height: 50px;
    padding: 0px 20px;
    text-transform: uppercase;
    margin-bottom: 6px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    font-size: 14px;
}
#navigation a:hover {
    background: #ddd;
}




.panel{
    min-width: 100%;
    height: 98%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    position: absolute;
    background: #000;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
.panel:target{
    margin-top: 0%;

    background-color: #ffcb00; yellow;
    background-color: #c40001; red;
  
}



.content{
    right: 40px;
    left: 280px;
    top: 0px;
    position: absolute;
    padding-bottom: 30px;
}
.content h2{ 
    font: 20px 'Gloria Hallelujah', cursive; 
     
    font-size: 40px;
    padding: 10px 0px 20px 0px;
    margin-top: 52px;
    color: #fff;
    color: rgba(255,255,255,0.9);
    text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}
.content p{
    font: 20px 'Gloria Hallelujah', cursive; 
    font-size: 18px;
    padding: 20px;
    line-height: 24px;
    color: #fff;
    display: inline-block;
    background: black;
    padding: 20px;
    margin: 3px 0px;
}



#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
    background: #000;
    color: #fff;
}



/* login leds */




#leds.on{ background-position:0 44px; }

.online, .offline{
	margin:57px 13px 0 13px;
	width:11px; height:41px; float:left; display:inline;
}

.online{
	background:-moz-linear-gradient(-90deg, rgba(85,92,79,0.9), rgba(69,76,62,1) 1%, rgba(42,49,34,1)  97%, rgba(15,15,15,1) 100% );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(85,92,79,0.9)), color-stop(0.04, rgba(69,76,62,1)), color-stop(0.96, rgba(42,49,34,1)), color-stop(1, rgba(15,15,15,1)) );
	border-top:1px solid #0f0f0f;
	border-right:1px solid #0f0f0f;
	border-left:1px solid #0f0f0f;
	border-bottom:1px solid #4e4e4e;
}

.online.active{
	-webkit-box-shadow:0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
	-moz-box-shadow:0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
	overflow:visible;
	background:-moz-linear-gradient(-90deg, rgba(156,204,105,0.9), rgba(122,186,53,1) 1%, rgba(95,159,26,1) 98%, rgba(40,40,40,0.5) 100% );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(156,204,105,0.9)), color-stop(0.04, rgba(122,186,53,1)), color-stop(0.96, rgba(95,159,26,1)), color-stop(1, rgba(0,0,0,1)) );
	border-top:1px solid rgba(44,66,20,1);
	border-right:1px solid rgba(42,63,20,0.8);
	border-left:1px solid rgba(42,63,20,0.8);
	border-bottom:1px solid rgba(80,99,60,1);
}

.offline{
	background:-moz-linear-gradient(-90deg, rgba(113,91,91,0.9), rgba(100,64,64,1) 1%, rgba(72,37,37,1) 98%, rgba(15,15,15,1) 100% );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(113,91,91,0.9)), color-stop(0.04, rgba(100,64,64,1)), color-stop(0.96, rgba(72,37,37,1)), color-stop(1, rgba(15,15,15,1)) );
	border-top:1px solid #0f0f0f;
	border-right:1px solid #0f0f0f;
	border-left:1px solid #0f0f0f;
	border-bottom:1px solid #4e4e4e;
}

.offline.active{
	-moz-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	background:-moz-linear-gradient(-90deg, rgba(226,120,120,0.9), rgba(216,74,74,1) 1%, rgba(188,47,47,1) 98%, rgba(40,40,40,0.5) );
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(226,120,120,0.9)), color-stop(0.04, rgba(216,74,74,1)), color-stop(0.96, rgba(188,47,47,1)), color-stop(1, rgba(0,0,0,1)) );
	
	border-top:1px solid rgba(97,30,30,1);
	border-right:1px solid rgba(83,27,27,0.8);
	border-left:1px solid rgba(83,27,27,0.8);
	border-bottom:1px solid rgba(125,69,69,1);
	
	-webkit-animation-name: blink;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes blink {
	from {
		-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	}
	50%{
		-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 0.5);
	}
	to {
		-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
	}
}

dabblet.html

<!-- http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/ -->
<!-- Header with Navigation -->
<div id="header">
    <h1>ekoki.me - everyting is an Idea!</h1>

    <ul id="navigation">
        <li><a id="link-home" href="#home">Home</a></li>
        <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
        <li><a id="link-about" href="#about">About Me</a></li>
        <li><a id="link-contact" href="#contact">Contact</a></li>
    </ul>
</div>

<body>

<!-- Home -->
<div id="home" class="content">
    <h2>Home</h2>
    <p>Everyhting is an idea Everyhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an idea</p>    <!-- ... -->
</div>
<!-- /Home -->
 
<!-- Portfolio -->
<div id="portfolio" class="panel">
    <div class="content">
        <h2>Portfolio</h2>
        <p>Some content about the porfolio </p>
        <p>Some content about the porfolio </p>
        <p>Some content about the porfolio </p>


        <!-- ... -->
    </div>
</div>
<!-- /Portfolio -->
 
<!-- About -->
<div id="about" class="panel">
    <div class="content">
        <h2>Login</h2>
        <p>Welcome to your ekoki.me</p> 

        
<div id="leds">                 
<div class="online led"></div>      
    <div class="offline active led"></div>
                 </div>
      <!-- ... -->
    </div>
</div>
<!-- /About -->
 
<!-- Contact -->
<div id="contact" class="panel">
    <div class="content">
        <h2>Welcome Mohamed, you have 20 updates, 1 new message, 4 awards, 2 gifts</h2>
        <p>Some content contact</p>
        <!-- ... -->
    </div>
</div>
<!-- /Contact -->
</body>

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"result"}