Skip to content

Instantly share code, notes, and snippets.

@fsunset

fsunset/dabblet.css

Created January 16, 2012 20:50
Show Gist options
  • Save fsunset/1622979 to your computer and use it in GitHub Desktop.
Save fsunset/1622979 to your computer and use it in GitHub Desktop.
Download ZIP
Light social HTML5-CSS3 menu :)
Raw
dabblet.css
/**
* Light social HTML5-CSS3 menu :)
*/
body{
background: rgb(110,70,70);
}
a{
color: white;
outline:none;
text-decoration: none;
}
h6{
display: inline;
}
/* ####### Social ######## */
#gmail{
position: absolute;
top: 300px;
left: -43px;
color: rgba(255,255,255,0.8);
width: 73px;
height: 35px;
padding-left: 6px;
padding-top: 2px;
text-align: left;
background: rgba(0,0,0,0.3);
box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-moz-transform:translate(0em,0pt);
-moz-transition-delay: 0s;
-moz-transition-duration: 0.5s;
-webkit-transform:translate(0em,0pt);
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.5s;
}
#gmail:hover {
-moz-transform:translate(42px);
-webkit-transform:translate(42px);
}
#facebook{
position: absolute;
top: 345px;
left: -66px;
color: rgba(255,255,255,0.8);
width: 95px;
height: 35px;
padding-left: 6px;
padding-top: 2px;
text-align: left;
background: rgba(0,0,0,0.3);
box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-moz-transform:translate(0em,0pt);
-moz-transition-delay: 0s;
-moz-transition-duration: 0.5s;
-webkit-transform:translate(0em,0pt);
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.5s;
}
#facebook:hover {
-moz-transform:translate(64px);
-webkit-transform:translate(64px);
}
#twitter{
position: absolute;
top: 390px;
left: -51px;
color: rgba(255,255,255,0.8);
width: 80px;
height: 35px;
padding-left: 6px;
padding-top: 2px;
text-align: left;
background: rgba(0,0,0,0.3);
box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.9);
-moz-transform:translate(0em,0pt);
-moz-transition-delay: 0s;
-moz-transition-duration: 0.5s;
-webkit-transform:translate(0em,0pt);
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.5s;
}
#twitter:hover {
-moz-transform:translate(50px);
-webkit-transform:translate(50px);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="gmail">
<a href="http://gmail.com" target="_blank">
<h6>Gmail <img src="https://dl-web.dropbox.com/get/gmail.png?w=562eb479"></h6></a>
</div><br/><br/><br/>
<div id="facebook">
<a href="http://facebook.com" target="_blank">
<h6>Facebook <img src="https://dl-web.dropbox.com/get/facebook.png?w=2b4a6831"></h6></a>
</div><br/><br/><br/>
<div id="twitter">
<a href="http://twitter.com/" target="_blank">
<h6>Twitter <img src="https://dl-web.dropbox.com/get/twitter.png?w=ea4f87a5"></h6></a>
</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment