Skip to content

Instantly share code, notes, and snippets.

@ddprrt

ddprrt/dabblet.css

Created January 31, 2012 12:55
Show Gist options
  • Save ddprrt/1710355 to your computer and use it in GitHub Desktop.
Save ddprrt/1710355 to your computer and use it in GitHub Desktop.
Download ZIP
Tab box using :target
Raw
dabblet.css
/**
* Tab box using :target
*/
ul {
font: normal normal normal 14px/16px Arial;
list-style-type: none;
margin: 200px 0;
padding: 0;
}
ul::after {
clear: both;
}
ul > li {
display: block;
float: left;
min-width: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
text-align: center;
}
ul > li:last-child {
border-right: 1px solid black;
}
ul > li > a {
padding: 7px 10px;
text-decoration: none;
color: #333;
display: block;
background: linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(202,200,180,1) 100%);
font-weight: bold;
}
ul > li > a:active {
background: linear-gradient(top, rgba(181,189,200,1) 100%,rgba(130,140,149,1) 36%,rgba(202,200,180,1) 0%);
}
.tabs {
border-top: 1px solid;
clear: both;
position: relative;
height: 120px;
}
.tab:target {
display: block;
}
.tab {
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
height: 100px;
padding: 10px;
position: relative;
top: 0px;
display: none;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="#tab1" id="link1">Tab 1</a></li>
<li><a hreF="#tab2" id="link2">Tab 2</a></li>
<li><a hreF="#tab3" id="link3">Tab 3</a></li>
</ul>
<div class="tabs">
<div class="tab" id="tab1">
This is tab 1
</div>
<div class="tab" id="tab2">
This is tab 2
</div>
<div class="tab" id="tab3">
This is tab 3
</div>
</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