Pure CSS Tab ataupun membuat tab hanya dengan menggunakan css, gambar berikut ini merupakan screen shoot dari hasil akhir dati latihan css untuk kali ini, atau anda juga bisa langsung mengunjungi halaman demonya langsung.
Berikut scriptnya yang harus kita buat :
CSS :
@import url(http://fonts.googleapis.com/css?family=Oswald:300);
*, *:after, *:before {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
}
.page-wrap {
width: 70%;
margin: 0 auto;
}
h1 {
font-size: 2rem;
font-weight: bold;
padding: 0;
margin: 20px 0;
color: #000;
text-align: center;
}
p {
font-size: 1rem;
line-height: 1.5rem;
color:#000;
}
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: justify;
color:#000;
}
.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;
}
<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>Letakkan Content Anda disini...</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>Letakkan Content Anda disini...</p>
<p>Letakkan Content Anda disini...</p>
<p>Letakkan Content Anda disini...</p>
<p>Letakkan Content Anda disini...</p>
<p>Letakkan Content Anda disini...</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>Letakkan Content Anda disini...</p>
<p>Letakkan Content Anda disini...</p>
<p>Letakkan Content Anda disini...</p>
</article>
</li>
</ul>
</div>
