Created
February 23, 2012 11:40
-
-
Save basher/1892497 to your computer and use it in GitHub Desktop.
CSS3 tabbed interface
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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