PureCSS Collection by Renato Ribeiro.
A Pen by Ezechias Emmanuel on CodePen.
<h1>PureCSS Tabs</h1> | |
<div class="pc-tab"> | |
<input checked="checked" id="tab1" type="radio" name="pct" /> | |
<input id="tab2" type="radio" name="pct" /> | |
<input id="tab3" type="radio" name="pct" /> | |
<nav> | |
<ul> | |
<li class="tab1"> | |
<label for="tab1">First Tab</label> | |
</li> | |
<li class="tab2"> | |
<label for="tab2">Second Tab</label> | |
</li> | |
<li class="tab3"> | |
<label for="tab3">Third Tab</label> | |
</li> | |
</ul> | |
</nav> | |
<section> | |
<div class="tab1"> | |
<h2>First</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p> | |
</div> | |
<div class="tab2"> | |
<h2>Second</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p> | |
</div> | |
<div class="tab3"> | |
<h2>Third</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p> | |
</div> | |
</section> | |
</div> | |
<footer> | |
by <a href="http://rena.to/" target="_blank">rena.to</a> | |
</footer> | |
PureCSS Collection by Renato Ribeiro.
A Pen by Ezechias Emmanuel on CodePen.
// PURE CSS TABS. | |
// 0 js lines. |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
/* Component Needs */ | |
.pc-tab > input, | |
.pc-tab section > div { | |
display: none; | |
} | |
#tab1:checked ~ section .tab1, | |
#tab2:checked ~ section .tab2, | |
#tab3:checked ~ section .tab3 { | |
display: block; | |
} | |
#tab1:checked ~ nav .tab1, | |
#tab2:checked ~ nav .tab2, | |
#tab3:checked ~ nav .tab3 { | |
color: red; | |
} | |
/* Visual Styles */ | |
$activeColor: #ffffff; | |
$unactiveColor: #eeeeee; | |
$unactiveHoverColor: #dddddd; | |
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700); | |
@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700); | |
*, *:after, *:before { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { | |
-webkit-font-smoothing: antialiased; | |
background: #ecf0f1; | |
font-family: 'Raleway'; | |
} | |
h1 { | |
text-align: center; | |
font-weight: 100; | |
font-size: 60px; | |
color: #e74c3c; | |
} | |
.pc-tab { | |
width: 100%; | |
max-width: 700px; | |
margin: 0 auto; | |
ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
li { | |
label { | |
font-family: "Raleway"; | |
float: left; | |
padding: 15px 25px; | |
border: 1px solid #ddd; | |
border-bottom: 0; | |
background: $unactiveColor; | |
color: #444; | |
&:hover { | |
background: $unactiveHoverColor; | |
} | |
&:active { | |
background: $activeColor; | |
} | |
} | |
&:not(:last-child) label { | |
border-right-width: 0; | |
} | |
} | |
} | |
section { | |
font-family: "Droid Serif"; | |
clear: both; | |
div { | |
padding: 20px; | |
width: 100%; | |
border: 1px solid #ddd; | |
background: #fff; | |
line-height: 1.5em; | |
letter-spacing: 0.3px; | |
color: #444; | |
h2 { | |
margin: 0; | |
font-family: "Raleway"; | |
letter-spacing: 1px; | |
color: #34495e; | |
} | |
} | |
} | |
} | |
#tab1:checked ~ nav .tab1, | |
#tab2:checked ~ nav .tab2, | |
#tab3:checked ~ nav .tab3 { | |
label { | |
background: white; | |
color: #111; | |
position: relative; | |
&:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
height: 2px; | |
width: 100%; | |
background: $activeColor; | |
left: 0; | |
bottom: -1px; | |
} | |
} | |
} | |
footer { | |
margin-top: 50px; | |
font-size: 14px; | |
color: #CCC; | |
text-align: center; | |
a { | |
color: #AAA; | |
text-decoration: none; | |
} | |
} |