Skip to content

Instantly share code, notes, and snippets.

@ddprrt

ddprrt/dabblet.css

Created February 29, 2012 11:34
Show Gist options
  • Save ddprrt/1940223 to your computer and use it in GitHub Desktop.
Save ddprrt/1940223 to your computer and use it in GitHub Desktop.
Download ZIP
Tab box using :target
Raw
dabblet.css
/**
* Tab box using :target
*/
.container {
position: relative;
top: 300px;
}
ul {
font: normal normal normal 14px/16px Arial;
list-style-type: none;
padding: 0;
position:absolute;
top: 0px;
margin: 0;
z-index:3;
}
ul::after {
clear: both;
}
ul > li {
display: block;
float: left;
min-width: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 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;
}
#tab1:target ~ ul #link1,
#tab2:target ~ ul #link2,
#tab3:target ~ ul #link3 {
height: 31px;
border-bottom: 0px;
}
#tab1:target ~ ul #link1 a,
#tab2:target ~ ul #link2 a,
#tab3:target ~ ul #link3 a,
ul > li > a:active {
background: linear-gradient(top, rgba(200,220,220,1) 0%,rgba(130,140,149,1) 36%, rgba(255,255,255,1) 100%);
height: 17px;
}
.tab:target {
display: block;
}
.info,
.tab {
border: 1px solid;
height: 100px;
padding: 10px;
position: absolute;
top: 31px;
width: 300px;
background: white;
z-index: 2;
display: none;
}
.info { display: block; z-index:1; background: transparent }
.bordered {
width: 120px;
height: 20px;
/* border-top: 50px solid red;*/
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
border-right: 50px solid transparent;
position: relative;
}
.bordered:before {
position: absolute;
background: red;
width: 20px;
height: 20px;
border-radius: 50%;
border: 20px solid red;
left: 0px;
top: 0px;
z-index: 2;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<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 class="info">
please click a tab
</div>
<ul>
<li id="link1"><a href="#tab1">Tab 1</a></li>
<li id="link2"><a hreF="#tab2" >Tab 2</a></li>
<li id="link3"><a hreF="#tab3">Tab 3</a></li>
</ul>
</div>
<div class="bordered">
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment