Created
February 13, 2012 03:22
-
-
Save argyleink/1813277 to your computer and use it in GitHub Desktop.
Pure CSS Tab System using :target
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
/** | |
* Pure CSS Tab System using :target | |
*/ | |
body { | |
font-family: sans-serif; | |
} | |
.tabrow { | |
text-align: center; | |
list-style: none; | |
margin: 200px 0 20px; | |
padding: 0; | |
line-height: 24px; | |
height: 26px; | |
overflow: hidden; | |
font-size:13px; | |
position: relative; | |
} | |
.tabrow li { | |
border: 1px solid #AAA; | |
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); | |
display: inline-block; | |
position: relative; | |
z-index: 0; | |
border-top-left-radius: 6px; | |
border-top-right-radius: 6px; | |
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; | |
text-shadow: 0 1px #FFF; | |
margin: 0 -5px; | |
padding: 0 20px; | |
} | |
.tabrow li:hover { | |
background: linear-gradient(top, #FFFFFF 0%, #D1D1D1 100%); | |
} | |
.tabrow a { | |
color: #555; | |
text-decoration: none; | |
} | |
li#lorem:target, | |
li#ipsum:target, | |
li#sit:target, | |
li#con:target { | |
background: #FFF; | |
color: #333; | |
z-index: 2; | |
border-bottom-color: #FFF; | |
padding-bottom:5px; | |
} | |
.tabrow:before { | |
position: absolute; | |
content: " "; | |
width: 100%; | |
bottom: 0; | |
left: 0; | |
border-bottom: 1px solid #AAA; | |
z-index: 1; | |
} | |
.tabrow li:before, | |
.tabrow li:after { | |
border: 1px solid #AAA; | |
position: absolute; | |
bottom: -1px; | |
top:19px; | |
width: 5px; | |
height: 5px; | |
content: " "; | |
} | |
.tabrow li:before { | |
left: -6px; | |
border-bottom-right-radius: 6px; | |
border-width: 0 1px 1px 0; | |
box-shadow: 2px 2px 0 #D1D1D1; | |
} | |
.tabrow li:after { | |
right: -6px; | |
border-bottom-left-radius: 6px; | |
border-width: 0 0 1px 1px; | |
box-shadow: -2px 2px 0 #D1D1D1; | |
} | |
.tabrow li:target:before { | |
box-shadow: 2px 2px 0 #FFF; | |
} | |
.tabrow li:target:after { | |
box-shadow: -2px 2px 0 #FFF; | |
} | |
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
<ul class="tabrow"> | |
<li id="lorem"> | |
<a href="#lorem">Lorem</a> | |
</li> | |
<li id="ipsum"> | |
<a href="#ipsum">Ipsum</a> | |
</li> | |
<li id="sit"class="selected"> | |
<a href="#sit">Sit amet</a> | |
</li> | |
<li id="con"> | |
<a href="#con">Consectetur adipisicing</a> | |
</li> | |
</ul> |
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","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment