Skip to content

Instantly share code, notes, and snippets.

@innovationhero

innovationhero/dabblet.css

Created September 25, 2012 09:10
Show Gist options
  • Save innovationhero/3780778 to your computer and use it in GitHub Desktop.
Save innovationhero/3780778 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dabblet.css
/* http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/ */
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
body{ background-color: #c40001;}
#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; */
/* el 3ak beta3y
transition: all .8s ease-in;
animation-play-state:paused;
transition: all .8s ease-out;
*/
transition: all 0.8s ease-in-out;
pause: 2s 3s;
}
.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);
}
}
.halfCircleLeft{ height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
background:green;
}
.halfCircleRight{
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
a { font-weight:bold; color:#346AA8; }
a:hover, a:focus, a:active { text-decoration:none; }
.container { position:relative; z-index:1; width:600px; padding:20px; margin:0 auto; background:#w FAF0D9 }
.container:after { content:""; display:block; clear:both; visibility:hidden; height:0; font-size:0; }
/* Shared styles */
.drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
.drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; }
.drop-shadow p { font-size:16px; font-weight:bold; }
/* Lifted corners */
.lifted { -moz-border-radius:4px; border-radius:4px; }
.lifted:before, .lifted:after { bottom:15px; left:10px; width:50%; height:20%; max-width:300px; max-height:100px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.lifted:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
/* Curled corners */
.curled { border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; }
.curled:before, .curled:after { bottom:12px; left:10px; width:50%; height:55%; max-width:200px; max-height:100px; -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -webkit-transform:skew(-8deg) rotate(-3deg); -moz-transform:skew(-8deg) rotate(-3deg); -ms-transform:skew(-8deg) rotate(-3deg); -o-transform:skew(-8deg) rotate(-3deg); transform:skew(-8deg) rotate(-3deg); }
.curled:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }
/* Perspective */
.perspective:before { left:80px; bottom:5px; width:50%; height:35%; max-width:200px; max-height:50px; -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -ms-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; }
.perspective:after { display:none; }
/* Raised shadow - no pseudo-elements needed */
.raised { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
/* Curved shadows */
.curved:before { top:10px; bottom:10px; left:0; right:50%; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; }
.curved-vt-2:before { right:0; }
.curved-hz-1:before { top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }
.curved-hz-2:before { top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }
/* Rotated box */
.rotated { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.rotated > :first-child:before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
Raw
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>
<div class="drop-shadow raised curved-hz-1 halfCircleLeft"> <p>Persfsfsfa</p> </div>
<div class="drop-shadow raised curved-hz-1"> <p>Perspective</p> </div>
<div class="drop-shadow raised curved-hz-1 halfCircleRight"> <p>Perspective</p> </div>
<!-- ... -->
</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>
Raw
settings.json
{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment