"Cara Membuat Tab Konten Sederhana Dengan Css3" itu yang akan akan saya bahas kali ini, Tab Konten ini dibuat oleh "M. Alex Junaedi". Jika anda klik salah satu menu yang terdapat di "TAB" tersebut seperti "Javascript" maka akan muncul text.
Demo :Silahkan anda klik salah satu tab.
Cara Membuat Tab Konten Sederhana :Cukup Copy dan Paste kode ini pada kolom widget. Tata Letak => Tambah Gadget/widget => Html/Javascript.
<style type="text/css">
judul {color: #fff;
margin-bottom: .5em;
font-size: 1.7em;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,1);
}
.slides {position: relative;
width: 500px;
height: 250px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-radius: 5px;
background: #333;
border: 1px solid rgba(255,255,255,.1);
margin:0 auto;
}.slide {position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}.content {position: absolute;
width: auto;
transform: translateX(-100%);
top: 0;
opacity: 0;
padding: 20px;
transition: transform .5s ease-out, opacity 1s ease-out;
}.content p {font-size: .85em;
color: #fff !important;
}input[type=radio] {display: none;
}label {display: block;
position: absolute;
bottom: 0;
line-height: 3em;
width: 25%;
text-align: center;
cursor: pointer;
font-size: .8em;
z-index: 50;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
font-weight: bold;
background: rgb(135,224,253);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );}.slide:nth-child(2) label {margin-left: 25%;
}.slide:nth-child(3) label {margin-left: 50%;
}.slide:nth-child(4) label {margin-left: 75%;
}input[type=radio]:checked ~ .content {transform: translateX(0);
opacity: 1;
}input[type=radio]:checked + label {background: #333;color: #ccc;text-shadow: none;}</style>
<div class="slides">
<div class="slide">
<input id="slide1" name="slideshow" type="radio" /><label for="slide1">CSS</label>
<div class="content">
<judul>CSS</judul>
<p>CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.</p>
</div>
</div>
<div class="slide">
<input id="slide2" name="slideshow" type="radio" /><label for="slide2">HTML</label>
<div class="content">
<judul>HTML</judul>
<p>HTML yang singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</p>
</div>
</div>
<div class="slide">
<input id="slide3" name="slideshow" type="radio" /><label for="slide3">JQUERY</label>
<div class="content">
<judul>JQUERY</judul>
<p>jQuery adalah librari atau kumpulan kode JavaScript siap pakai. Keunggulan menggunakan jQuery dibandingkan dengan JavaScript standar, yaitu menyederhanakan kode JavaScript dengan cara memanggil fungsi-fungsi yang disediakan oleh jQuery. JavaScript sendiri merupakan bahasa Scripting yang bekerja disisi Client/Browser sehingga website bisa lebih interaktif.</p>
</div>
</div>
<div class="slide">
<input id="slide4" name="slideshow" type="radio" /><label for="slide4">JAVA SCRIPT</label>
<div class="content">
<judul>JAVASCRIPT</judul>
<p>JavaScript merupakan bahasa pemrograman berbasis client, artinya bahasa ini berjalan pada sisi browser pengguna (user) dan bukan pada server. Salah satu keuntungan dari bahasa ini adalah ringan karena berjalan pada masing-masing browser dan pekerjaan tidak di bebankan pada server. Jika di akses oleh 1000 orang maka setiap beban akan di tanggung oleh masing-masing browser, bukan server yang menanggung eksekusi 1000 pengakses tersebut.</p>
</div>
</div>
</div>
