Skip to content

Instantly share code, notes, and snippets.

@alma4rebi
Last active August 15, 2016 15:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alma4rebi/46afd6be6f885e898b60cc6a95622ad9 to your computer and use it in GitHub Desktop.
Save alma4rebi/46afd6be6f885e898b60cc6a95622ad9 to your computer and use it in GitHub Desktop.
Pure-CSS3-Tabs
<div class="page-wrap">
<h1>
Pure CSS Tab
</h1>
<ul class="tab-wrap">
<li>
<input type="radio" id="tab-1" name="tab" checked />
<label for="tab-1" class="label-1">
Tab 1
</label>
<article class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam laboriosam voluptatem optio cupiditate aliquam culpa doloremque perspiciatis unde blanditiis repellendus consequuntur rerum accusamus, minus pariatur voluptatum assumenda ad adipisci esse!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad reprehenderit, ducimus tempore quidem iste quisquam! Illum voluptatibus ad rerum possimus quisquam distinctio, quaerat quod beatae quas, soluta, vel esse consequatur!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, illo itaque ratione tempore eius eos ab, aperiam, repellendus sequi, qui et. Nobis repellat, qui voluptate iste asperiores temporibus provident ex.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum laboriosam porro eum ea eos nihil a dolores corrupti libero, nobis, sequi voluptatum? Unde accusamus laborum ex reiciendis quibusdam aliquam repellat.
</p>
</article>
</li>
<li>
<input type="radio" id="tab-2" name="tab" />
<label for="tab-2" class="label-2">
Tab 2
</label>
<article class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, culpa molestias delectus incidunt cum sed impedit aperiam aspernatur aliquam eos. Provident velit minus quia ea amet. Reprehenderit, voluptatem, explicabo. Consequuntur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis amet repellat, nam. Beatae consequatur ratione quas omnis similique, alias, doloremque quam soluta rem libero eum error nesciunt maxime iure deleniti!
</p>
<p>
Assumenda rerum dolorum sapiente, voluptatibus nobis dolore debitis autem sed eos inventore odio provident quae molestiae quibusdam voluptate dicta neque, quisquam necessitatibus, expedita aliquam earum alias corrupti! Maxime, quia deleniti!
</p>
<p>
Quidem sunt quae cumque laborum incidunt commodi nam impedit cupiditate molestiae quia, aperiam hic nobis ullam esse neque natus saepe provident excepturi sed, iusto similique fuga libero nisi quod mollitia.
</p>
<p>
Atque voluptas doloremque vel, reprehenderit molestiae modi corrupti assumenda vitae at totam accusamus a autem consectetur, expedita veniam ut sapiente distinctio aliquid eum rerum eos accusantium dolor voluptatibus. Consectetur, voluptate.
</p>
</article>
</li>
<li>
<input type="radio" id="tab-3" name="tab" />
<label for="tab-3" class="label-3">
Tab 3
</label>
<article class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, culpa molestias delectus incidunt cum sed impedit aperiam aspernatur aliquam eos. Provident velit minus quia ea amet. Reprehenderit, voluptatem, explicabo. Consequuntur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde itaque consequatur sequi repellendus, ipsa quo neque. A eaque veritatis earum, aliquid dolorum itaque tempore, aliquam eum, culpa expedita doloremque nihil.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, sapiente. Doloremque quos eius consequuntur alias perspiciatis ratione deserunt soluta nulla sequi, nihil iste sint debitis ea, doloribus eos non. Eligendi?
</p>
</article>
</li>
</ul>
</div>

Pure CSS3 Tabs

Using CSS, It is possible to make pure CSS tabbed navigation with HTML radio hack and CSS3 selector.

A Pen by Nikul Lakhani on CodePen.

License.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
*, *:after, *:before {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
background: #333;
}
.page-wrap {
width: 80%;
margin: 0 auto;
}
h1 {
font-size: 2rem;
font-weight: bold;
padding: 0;
margin: 20px 0;
color: #fff;
text-align: center;
}
p {
font-size: 1rem;
line-height: 1.5rem;
}
input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tab-wrap {
width: 100%;
float: none;
list-style: none;
position: relative;
margin: 0 auto;
padding: 0;
text-align: left;
}
.tab-wrap li {
float: left;
display: block;
}
.tab-wrap label {
position: relative;
display: inline-block;
padding: 1.5em 1.5em 1em;
color: inherit;
text-decoration: none;
margin: 0 10px 0 0px;
}
.label-1 {
z-index: 100;
}
.label-2 {
z-index: 90;
}
.label-3 {
z-index: 80;
}
.tab-wrap label:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 10px;
left: 0;
z-index: -1;
border: .1em solid #aaa;
border-bottom: none;
border-radius: 10px 10px 0 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
-webkit-transform: perspective(5px) rotateX(2deg);
transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
.tab-wrap .tab-content {
z-index: 200;
display: none;
overflow: hidden;
width: 100%;
position: absolute;
top: 53px;
left: 0;
padding: 20px;
background: #fff;
border-radius: 3px;
border: .1em solid #aaa;
border-top: 0;
}
.tab-wrap [id^="tab"]:checked + label {
z-index: 200;
margin-bottom: -1px;
border-top-width: 1px;
}
.tab-wrap [id^="tab"]:checked + label:before {
background: #fff;
}
.tab-wrap [id^="tab"]:checked ~ .tab-content{
display: block;
}
@alma4rebi
Copy link
Author

Pure CSS3 Tabs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment