Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created March 29, 2012 15:45
Show Gist options
  • Save dziudek/2238765 to your computer and use it in GitHub Desktop.
Save dziudek/2238765 to your computer and use it in GitHub Desktop.
Download ZIP
Simple CSS UI Kit
Raw
dabblet.css
/**
* Simple CSS UI Kit
*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.toolbar {
margin: 0;
background: linear-gradient(90deg, #ccc, #fff);
height: 48px;
border-bottom: 4px solid #333;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
ul.tabs {
list-style-type: none;
padding: 0;
margin: 16px 0 0 10px;
}
ul.tabs li {
float: left;
height: 32px;
line-height: 32px;
margin: 0 0 0 5px;
padding: 0 15px;
background: linear-gradient(90deg, #bbb, #ddd);
color: #333;
text-shadow: 1px 1px 0 #fff;
border-radius: 5px 5px 0 0;
font-size: 12px;
border: 1px solid #bbb;
}
ul.tabs li.active {
background: linear-gradient(90deg, #333, #555);
border: 1px solid #000;
text-shadow: 1px 1px 0 #000;
color:#fff;
}
ul.tabs li:hover {
background: linear-gradient(90deg, #333, #555);
border: 1px solid #000;
text-shadow: 1px 1px 0 #000;
color:#fff;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="toolbar">
<ul class="tabs">
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment