Skip to content

Instantly share code, notes, and snippets.

@mojaray2k

mojaray2k/dabblet.css

Forked from basher/dabblet.css
Last active August 29, 2015 14:07
Show Gist options
  • Save mojaray2k/6d5838ff306524c274a4 to your computer and use it in GitHub Desktop.
Save mojaray2k/6d5838ff306524c274a4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dabblet.css
/**
* CSS3 tabbed interface
* - based on http://www.sitepoint.com/css3-tabs-using-target-selector/
* - 1st tab is LAST in markup:
* - so it can be styled as active on page load
* - use combination of :target and ~ to override when another tab is clicked
*/
body {
font: 62.5%/1.5 Georgia,serif;
margin: 10em 0 0;
}
h2 {
font-size: 2em;
}
p {
font-size: 1.6em;
}
.tabs {
display: block;
margin: 0 auto;
position: relative;
width: 40em;
}
.tab_block {
position: absolute;
}
.tab_block h2 {
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
left: -1em;
margin: 0;
padding: 0;
position: relative;
top: -2.7em;
width: 6em;
}
.tab_block:first-child h2 {
left: 5.3em;
}
.tab_block:nth-child(2) h2 {
left: 11.6em;
}
.tab_block h2 a {
color: #000;
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 100%;
}
.tab_block div {
box-sizing: border-box;
margin: -5.4em 0 0 -2.1em;
height: 0;
overflow: hidden;
visibilty: hidden;
width: 0;
}
/* last in HTML markup, but visually shown first */
.tab_block:last-child {
background: #FFF;
}
.tab_block:last-child h2 {
background: #FFF;
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
left: -1.05em;
}
.tab_block:last-child h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:last-child div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;height: auto;
overflow: visible;
visibilty: visible;
width: 40em;
}
.tab_block:target,
.tab_block:target h2 {
background-color: #FFF;
}
.tab_block:target h2 {
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
}
.tab_block:target h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:target ~ .tab_block:last-child h2 {
background: #DDD;
border: 0;
box-shadow: none;
left: -1em;
}
.tab_block:target ~ .tab_block:last-child h2:after {
border-bottom: 0;
}
.tab_block:target div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;
height: auto;
visibilty: visible;
width: 40em;
}
.tab_block:target ~ .tab_block div {
border: 0;
box-shadow: none;
height: 0;
overflow: hidden;
padding: 0;
visibilty: hidden;
width: 0;
}
.tab_block h2 {
transition: all 500ms ease;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<article class="tabs">
<section id="tab2" class="tab_block">
<h2><a href="#tab2">Tab 2</a></h2>
<div>
<p>This content appears on tab 2.</p>
</div>
</section>
<section id="tab3" class="tab_block">
<h2><a href="#tab3">Tab 3</a></h2>
<div>
<p>This content appears on tab 3.</p>
<p>Some more content...</p>
</div>
</section>
<section id="tab1" class="tab_block">
<h2><a href="#tab1">Tab 1</a></h2>
<div>
<p>This content appears on tab 1.</p>
<p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
<p>Some more content...</p>
</div>
</section>
</article>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment