Skip to content

Instantly share code, notes, and snippets.

@MichaelMartinez

MichaelMartinez/dabblet.css

Forked from mightymess/dabblet.css
Created May 23, 2012 06:55
Show Gist options
  • Save MichaelMartinez/2773612 to your computer and use it in GitHub Desktop.
Save MichaelMartinez/2773612 to your computer and use it in GitHub Desktop.
Download ZIP
cool animation dabblet
Raw
dabblet.css
body{
background:#DDD;
font-family:PacificoRegular;
color:#ea4c89;
font-smooth:always;
cursor:pointer;
}
.reveal{
background:#DDD;
position:absolute;
width:400px;
height:400px;
z-index:5;
opacity:0;
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 1.5s;
font-size:150%;
text-align:center;
line-height:400px;
}
.slider, .innerShadow, .frame, .back{
position:absolute;
border-radius:0;
width:300px;
height:300px;
}
.frame{
top:50px;
left:50px;
background:transparent;
width:300px;
height:300px;
border-color:#444;
border-style:solid;
border-width:13px 15px 15px;
box-shadow:#000 0 5px 10px, #000 0 6px 1px;
overflow:hidden;
}
.innerShadow{
box-shadow:inset #000 0 0 30px;
z-index:3;
}
.slider{
background-image: linear-gradient(bottom, rgb(163,44,90) 0%, rgb(234,76,137) 55%, rgb(234,76,137) 74%, rgb(163,44,90) 100%);
z-index:2;
top:0;
width:300px;
height:300px;
transform:translate(0, 0);
transition: all 1.5s ease-in-out;
text-align:center;
}
.slider img{
margin:0 auto;
}
.shadow{
box-shadow:#333 0 0 30px;
}
.reveal:hover + .frame .slider{
transition: all 0.5s ease-in-out;
transform:translate(0, -380px);
}
.pannel{
background:transparent url("http://mightymess.com/dribble/dribbble-ball.png") no-repeat center center;
background-size:305px;
width:300px;
display:block;
height:300px;
border-radius:150px;
position:absolute;
transition: all 0.8s ease-in-out;
}
.reveal:hover + .frame .pannel.top{
transform-origin:right center;
transform: rotate(-180deg);
}
.reveal:hover + .frame .pannel.right{
transform-origin:center bottom;
transform: rotate(-180deg);
}
.reveal:hover + .frame .pannel.bottom{
transform-origin:left center;
transform: rotate(-180deg);
}
.reveal:hover + .frame .pannel.left{
transform-origin:center top;
transform: rotate(-180deg);
}
.pannel.left{
left:-150px;
top:0;
}
.pannel.right{
right:-150px;
top:0;
}
.pannel.top{
top:-150px;
}
.pannel.bottom{
bottom:-150px;
}
.back{
top:65px;
left:65px;
background-image: linear-gradient(bottom, #333 0%, #444 38%, #444 74%, #333 100%);
font-weight:normal;
color:#efefef;
font-size:200%;
text-align:center;
line-height:220px;
height:300px;
z-index:-1;
}
.back p{
text-shadow:#000 5px 5px 2px;
}
Raw
dabblet.html
<link rel="stylesheet" href="http://mightymess.com/wp-content/themes/FDLA/pacifico-fontfacekit/stylesheet.css" type="text/css" media="screen"/>
<!-- content to be placed inside <body>…</body> -->
<div class="reveal">patience...</div>
<div class="frame">
<div class="innerShadow">&nbsp;</div>
<div class="slider shadow">
<img src="http://www.mightymess.com/dribble/dribble_white.png" width="300"/>
</div>
<div class="pannel top shadow">&nbsp;</div>
<div class="pannel right shadow">&nbsp;</div>
<div class="pannel bottom shadow">&nbsp;</div>
<div class="pannel left shadow">&nbsp;</div>
</div>
<div class="back"><p>Thank You Jon!</p></div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment