Skip to content

Instantly share code, notes, and snippets.

@zincplusplus

zincplusplus/dabblet.css

Created August 1, 2012 09:32
Show Gist options
  • Save zincplusplus/3225451 to your computer and use it in GitHub Desktop.
Save zincplusplus/3225451 to your computer and use it in GitHub Desktop.
Download ZIP
Header
Raw
dabblet.css
/**
* Header
*/
body {
font-family: "Lucida Grande", Arial, sans-serif;
margin: 0;
padding: 0;
background: #f2f2f2;
}
#topbar {
background-color: #292929;
background: linear-gradient(top, #3D3F46, #2D2F36);
border-bottom: 2px solid #000;
box-shadow: 0 2px 0 0 #565B62;
color: #fff;
height: 36px;
/* border-bottom: 4px solid #1B6C3A;*/
padding: 10px;
}
#logo {
font-size: 24px;
font-weight: bold;
margin-left: 12px;
padding: 0 10px;
background-color: #0E632E;
display: inline-block;
height: 36px;
line-height: 36px;
box-shadow: 0 1px 0 0 #5FA179 inset, 0 1px 4px 0 black;
background: linear-gradient(top, #2F834F, #1B6C3A);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
float: left;
border-radius: 4px;
color: white;
text-decoration: none;
}
#logo:hover {
background: linear-gradient(top, #2F8F4F, #1B6C3A);
}
#logo:active {
background: linear-gradient(bottom, #2F774F, #1B6C3A);
}
#topbar ul {
float: left;
list-style: none inside;
margin: 0;
padding: 0;
}
#topbar li {
display: inline-block;
height: 40px;
float: left;
}
#topbar li a {
color: #747886;
display: block;
height: 40px;
line-height: 36px;
padding: 0 10px;
margin-left: 10px;
text-decoration: none;
font-size: 14px;
text-shadow: 0 1px 0 black;
font-weight: bold;
}
#topbar li a:hover {
color: white;
}
Raw
dabblet.html
<div id="topbar">
<a id="logo" href="#">flipert</a>
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment