Membuat Menu Tab View Di Blog Dengan CSS3

Hallo sobat, saya kembali posting artikel di hari minggu ini postingan ini juga berkaitan dengan CSS3 hmmm.... pasti sobat heran kenapa hari ini saya posting CSS3 terus?? karena ide saya untuk memposting hari ini tentang CSS3 semua dan saya masih banyak menyimpan ide tentang artikel CSS3 nah jadi jika sobat ingin tau apa saja CSS3 yang akan saya bagikan sobat tetap kunjungi blog ini hehehe... Singkat waktu langsung saja yuk simak terus artikel ini :)

Login Ke Blogger
Masuk ke dashboard
Tata Letak > Add Gadget > HTML/ JavaScript
Masukkan kode berikut.

<style>
.tabs{
position:relative;
margin:0 0 0 0;
width:750px;
}
.tabs input{
position:absolute;
z-index:1000;
width:120px;
height:40px;
left:0px;
top:0px;
opacity:0;
cursor:pointer;
}
.tabs input#tab-2{
left:120px;
}
.tabs label{
background:#00aaff;
background:-webkit-linear-gradient(top, #00aaff, #018984);
font-size:12px;
line-height:40px;
position:relative;
padding:0 20px;
float:left;
display:block;
width:90px;
color:#385c5b;
text-transform:uppercase;
font-weight:bold;
text-align:center;
text-shadow:1px 1px 1px rgba(255,255,255,0.3);
border-radius:3px 3px 0 0;
box-shadow:2px 0px 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.tabs label:after{
content:";
background:#fff;
position:absolute;
bottom:-2px;
left:0;
width:100%;
height:2px;
display:block;
}
.tabs input:hover + label{
background:#000;
background:-webkit-linear-gradient(top, #000, #018984);
color:#00aaff;
}
.tabs label:first-of-type{
z-index:4;
box-shadow:2px 0 2px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.4);
}
.tab-label-2{
z-index:3;
}
.tabs input:checked + label{
background:#fff;
z-index:6;
}
.clear-shadow{
clear:both;
}
.content{
background:#fff;
position:relative;
width:320px;
height:150px;
z-index:5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.4);
border-radius:0 3px 3px 3px;
}
.content div{
position:absolute;
top:0;
left:0;
padding:0;
z-index:1;
opacity:0;
-webkit-transition:opacity linear 0.1s;
}
.tabs input.tab-selector-1:checked~.content .content-1,
.tabs input.tab-selector-2:checked~.content .content-2{
z-index:100;
opacity:1;
-webkit-transition:opacity ease-out 0.2x 0.1s;
}
</style>
<div class="box">
<section class="tabs">
<input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" />
<label class="tab-label-1" for="tab-1">Judul Tab 1</label>
<input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" />
<label class="tab-label-2" for="tab-2">Judul Tab 2</label>
<div class="clear-shadow">
</div>
<div class="content">
<div class="content-1">
<ul>
Masukkan Teks Tab 1 Disini
</ul>
</div>
<div class="content-2">
<ul>
Masukkan Teks Tab 2 Disini
</ul>
</div>
</div>
</section></div>

Terakhir Simpan, lihat apa yang terjadi.

Demo

Judul Tab 1Judul Tab 2

Masukkan Teks Tab 1 Disini

Masukkan Teks Tab 2 Disini

Sekian artikel hari ini yang dapat saya sampaikan. Semoga artikel ini bermanfaat bagi sobat

Title : Membuat Menu Tab View Di Blog Dengan CSS3
Description : Hallo sobat, saya kembali posting artikel di hari minggu ini postingan ini juga berkaitan dengan CSS3 hmmm.... pasti sobat heran kenapa ...

Postingan Populer

Membuat Menu Tab View Di Blog Dengan CSS3

Demo