4 Style Animasi Menu Tab View CSS3 Pada Blog – menu tab view pada pembahasan kali ini terdiri dari 4 style effect yang berbeda. Lebih dulu kita akan mengenal tab view, lalu apa itu tab view? Menu tab view adalah suatu navigasi menu pada blog yang terdiri dari beberapa tab heading untuk untuk mengelompokkan dan kemudian menampilkan label yang didalamnya tanpa harus berpindah window dan tanpa proses loading karena pada tab konten akan secara langsung menampilkan secara otomatis dan dengan interface yang simple dan efisien. Jadi pada dasarnya jika pada tab heading tersebut saat diklik oleh tombol mouse maka tidak perlu harus menunggu waktu lama untuk melihat isi konten namun secara otomatis konten akan langsung muncul dengan sendirinya. Menu tab view bisa digunakan untuk beberapa fungsi dan didalamnya tidak harus berupa teks, melainkan dengan isi gambar juga bisa. Banyak dari para blogger menggunakan menu tab view untuk mengelompokkan sebuah link halaman dengan struktur konten yang panjang dan untuk menyingkat halamannya mereka menggunakan menu tab view. Lalu bagaimana untuk memasang menu tab view kedalam blog? Berikut adalah tutorial cara membuat dan memasang kedalam blog yang bisa anda pilih salah satu dari 4 Style Animasi Menu Tab View CSS3 Pada Blog.
1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
.menutabviews1 {position: relative;}
.menutabviews1 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}
.menutabviews1 input#tab-2{left: 120px;}
.menutabviews1 input#tab-3{left: 240px;}
.menutabviews1 input#tab-4{left: 360px;}
.menutabviews1 label {background: #000;background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;float: left;display: block;width: 80px;
color: #fff;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;text-shadow: 1px 1px 1px #fff;
border-radius: 3px 3px 0 0;box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);}
.menutabviews1 label:after {papercontent1: '';background: #52e052;position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;display: block;}
.menutabviews1 input:hover + label {background: #000;}
.menutabviews1 label:first-of-type {z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1);}
.tab-label-2 {z-index: 3;}
.tab-label-3 {z-index: 2;}
.tab-label-4 {z-index: 1;}
.menutabviews1 input:checked + label {background: #52e052;z-index: 6;}
.clear-shadow {clear: both;}
.papercontent1 {background: #E9FBE9;position: relative;width: 100%;height: 370px;z-index: 5;box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;}
.papercontent1 div {position: absolute;top: 0;left: 0;padding: 10px 40px;z-index: 1;opacity: 0;-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;-o-transition: opacity linear 0.1s;-ms-transition: opacity linear 0.1s;transition: opacity linear 0.1s;}
.menutabviews1 input.tab-selector-1:checked ~ .papercontent1 .papercontent1-1,
.menutabviews1 input.tab-selector-2:checked ~ .papercontent1 .papercontent1-2,
.menutabviews1 input.tab-selector-3:checked ~ .papercontent1 .papercontent1-3,
.menutabviews1 input.tab-selector-4:checked ~ .papercontent1 .papercontent1-4 {
z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;-moz-transition: opacity ease-out 0.2s 0.1s;-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;transition: opacity ease-out 0.2s 0.1s;}
.papercontent1 div h2,
.papercontent1 div h3{color: #000;}
.papercontent1 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;
padding-left: 15px;font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
3. Klik Terapkan ke Blog.
Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.
4. Selanjutnya untuk menampilkan Animasi Menu Tab View CSS3 Pada Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode berikut ini didalamnya, atau bisa juga dikolom posting dengan menggunakan mode HTML.
Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.
4. Selanjutnya untuk menampilkan Animasi Menu Tab View CSS3 Pada Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode berikut ini didalamnya, atau bisa juga dikolom posting dengan menggunakan mode HTML.
<section class="menutabviews1">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>
<div class="papercontent1">
<div class="papercontent1-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent1-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent1-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent1-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>
Keterangan:
Ganti tulisan warna merah dan biru berdasarkan keterangan yang ada.
Langkah terakhir klik Simpan, maka selesai dan silahkan lihat hasilnya dari cara membuat Animasi Menu Tab View CSS3 Pada Blog.
Tutorial di atas adalah untuk efek Animasi Menu Tab View STYLE 1, untuk membuat Animasi Menu Tab View STYLE 2-4 seperti pada halaman demo maka silahkan copy kode dibawah ini dan cara pemasangannya seperti langkah diatas.
KODE Menu Tab View STYLE 2
CSS
Ganti tulisan warna merah dan biru berdasarkan keterangan yang ada.
Langkah terakhir klik Simpan, maka selesai dan silahkan lihat hasilnya dari cara membuat Animasi Menu Tab View CSS3 Pada Blog.
Tutorial di atas adalah untuk efek Animasi Menu Tab View STYLE 1, untuk membuat Animasi Menu Tab View STYLE 2-4 seperti pada halaman demo maka silahkan copy kode dibawah ini dan cara pemasangannya seperti langkah diatas.
KODE Menu Tab View STYLE 2
CSS
.menutabviews2 {position: relative;}
.menutabviews2 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}
.menutabviews2 input#tab-2{left: 120px;}
.menutabviews2 input#tab-3{left: 240px;}
.menutabviews2 input#tab-4{left: 360px;}
.menutabviews2 label {background: #000;background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);
background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);
background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;float: left;display: block;width: 80px;
color: #fff;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;text-shadow: 1px 1px 1px #fff;
border-radius: 3px 3px 0 0;box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);}
.menutabviews2 label:after {papercontent2: '';background: #52e052;position: absolute;bottom: -2px;left: 0;width: 100%;
height: 2px;display: block;}
.menutabviews2 input:hover + label {background: #000;}
.menutabviews2 label:first-of-type {z-index: 4;box-shadow: 2px 0 2px rgba(0,0,0,0.1);}
.tab-label-2 {z-index: 3;}
.tab-label-3 {z-index: 2;}
.tab-label-4 {z-index: 1;}
.menutabviews2 input:checked + label {background: #52e052;z-index: 6;-webkit-animation: page 0.2s linear;-moz-animation: page 0.2s linear;
-ms-animation: page 0.2s linear;-o-animation: page 0.2s linear;animation: page 0.2s linear;}
.clear-shadow {clear: both;}
.papercontent2 {background: #E9FBE9;position: relative;width: 100%;height: 370px;z-index: 5;overflow: hidden;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);border-radius: 0 3px 3px 3px;}
.papercontent2 div {position: absolute;top: 0;padding: 10px 40px;z-index: 1;opacity: 0;-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;-o-transition: all linear 0.3s;-ms-transition: all linear 0.3s;transition: all linear 0.3s;}
.papercontent2-1, .papercontent2-3 {-webkit-transform: translateX(-250px);-moz-transform: translateX(-250px);-o-transform: translateX(-250px);
-ms-transform: translateX(-250px);transform: translateX(-250px);}
.papercontent2-2, .papercontent2-4 {-webkit-transform: translateX(250px);-moz-transform: translateX(250px);-o-transform: translateX(250px);
-ms-transform: translateX(250px);transform: translateX(250px);}
.menutabviews2 input.tab-selector-1:checked ~ .papercontent2 .papercontent2-1,
.menutabviews2 input.tab-selector-2:checked ~ .papercontent2 .papercontent2-2,
.menutabviews2 input.tab-selector-3:checked ~ .papercontent2 .papercontent2-3,
.menutabviews2 input.tab-selector-4:checked ~ .papercontent2 .papercontent2-4 {
-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);
transform: translateX(0px);z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);
opacity: 1;-webkit-transition: all ease-out 0.2s 0.1s;-moz-transition: all ease-out 0.2s 0.1s;-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;transition: all ease-out 0.2s 0.1s;}
.papercontent2 div h2,
.papercontent2 div h3{color: #000;}
.papercontent2 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;padding-left: 15px;
font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
@keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-moz-keyframes page {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-webkit-keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-ms-keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
@-o-keyframes "page" {0% {left: 0;}50% {left: 10px;}100% {left: 0;}}
HTML
<section class="menutabviews2">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>
<div class="papercontent2">
<div class="papercontent2-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent2-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent2-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent2-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>
KODE Menu Tab View STYLE 3
CSS
.menutabviews3 {position: relative;}
.menutabviews3 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);cursor: pointer;}
.menutabviews3 input#tab-2{left: 120px;}
.menutabviews3 input#tab-3{left: 240px;}
.menutabviews3 input#tab-4{left: 360px;}
.menutabviews3 label {background: #000;
background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);
background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);
background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;float: left;display: block;
width: 80px;color: #fff;top: 0px;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: center;
text-shadow: 1px 1px 1px #fff;border-radius: 3px 3px 0 0;box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);}
.menutabviews3 label:after {papercontent3: '';background: #52e052;position: absolute;bottom: -8px;left: 0;width: 100%;height: 8px;display: block;}
.menutabviews3 input:hover + label {background: #000;top: -8px;-webkit-transition: top linear 0.2s;-moz-transition: top linear 0.2s;-o-transition: top linear 0.2s;
-ms-transition: top linear 0.2s;transition: top linear 0.2s;}
.menutabviews3 input:hover + label:after{background: #52e052;}
.menutabviews3 input:hover + label ~ .clear-shadow {top: -8px;-webkit-transition: top linear 0.2s;-moz-transition: top linear 0.2s;-o-transition: top linear 0.2s;
-ms-transition: top linear 0.2s;transition: top linear 0.2s;}
.menutabviews3 input:checked:hover + label {top: 0;}
.menutabviews3 input:checked:hover + label:after{background: #52e052;}
.menutabviews3 input:checked:hover + label ~ .clear-shadow {top: 0;background: #52e052;-webkit-transition: none;-moz-transition: none;-o-transition: none;-ms-transition: none;
transition: none;}
.menutabviews3 input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{z-index: 3;}
.menutabviews3 input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {z-index: 2;}
.menutabviews3 input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {z-index: 1;}
.menutabviews3 input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {z-index: 0;}
.menutabviews3 label:first-of-type {z-index: 4;box-shadow: 2px 0 2px rgba(0,0,0,0.1);}
.tab-label-2 {z-index: 3;}
.tab-label-3 {z-index: 2;}
.tab-label-4 {z-index: 1;}
.menutabviews3 input:checked + label {background: #52e052;z-index: 6;-webkit-transition: top linear 0.2s;-moz-transition: top linear 0.2s;
-o-transition: top linear 0.2s;-ms-transition: top linear 0.2s;transition: top linear 0.2s;}
.clear-shadow {background: #52e052;position: relative;top: 0;height: 10px;margin-bottom: -10px;clear: both;z-index: -2;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);border-radius: 3px;}
.papercontent3 {background: #e9fbe9;position: relative;width: 100%;height: 370px;z-index: 5;overflow: hidden;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);border-radius: 0 3px 3px 3px;}
.papercontent3 div {position: absolute;top: 0;left: 0;bottom: 100%;padding: 10px 40px;overflow: hidden;z-index: 1;opacity: 0;
-webkit-transition: all linear 0.1s;-moz-transition: all linear 0.1s;-o-transition: all linear 0.1s;-ms-transition: all linear 0.1s;transition: all linear 0.1s;}
.menutabviews3 input.tab-selector-1:checked ~ .papercontent3 .papercontent3-1,
.menutabviews3 input.tab-selector-2:checked ~ .papercontent3 .papercontent3-2,
.menutabviews3 input.tab-selector-3:checked ~ .papercontent3 .papercontent3-3,
.menutabviews3 input.tab-selector-4:checked ~ .papercontent3 .papercontent3-4 {
bottom: 0px;z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;
-webkit-transition: all ease-out 0.2s 0.2s;-moz-transition: all ease-out 0.2s 0.2s;-o-transition: all ease-out 0.2s 0.2s;
-ms-transition: all ease-out 0.2s 0.2s;transition: all ease-out 0.2s 0.2s;}
.papercontent3 div h2,
.papercontent3 div h3{color: #000;}
.papercontent3 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;padding-left: 15px;
font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
HTML
<section class="menutabviews3">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>
<div class="papercontent3">
<div class="papercontent3-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent3-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent3-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent3-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>
KODE Menu Tab View STYLE 4
CSS
.menutabviews4 {position: relative;}
.menutabviews4 input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: 0px;top: 0px;opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);cursor: pointer;}
.menutabviews4 input#tab-2{top: 40px;}
.menutabviews4 input#tab-3{top: 80px;}
.menutabviews4 input#tab-4{top: 120px;}
.menutabviews4 label {background: #000;
background: -moz-linear-gradient(top, #000 0%, #52e052 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#52e052));
background: -webkit-linear-gradient(top, #000 0%,#52e052 100%);
background: -o-linear-gradient(top, #000 0%,#52e052 100%);
background: -ms-linear-gradient(top, #000 0%,#52e052 100%);
background: linear-gradient(top, #000 0%,#52e052 100%);
font-size: 15px;line-height: 40px;height: 40px;position: relative;padding: 0 20px;display: block;width: 80px;
color: #fff;letter-spacing: 1px;text-transform: uppercase;font-weight: bold;text-align: right;float: left;clear: both;
text-shadow: 1px 1px 1px #fff; border-radius: 3px 0 0 3px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1);}
.menutabviews4 label:after {papercontent4: '';background: #52e052;position: absolute;right: -2px;top: 0;width: 2px;height: 100%;}
.menutabviews4 input:hover + label {background: #000;}
.menutabviews4 label:first-of-type {z-index: 4;}
.tab-label-2 {z-index: 3;}
.tab-label-3 {z-index: 2;}
.tab-label-4 {z-index: 1;}
.menutabviews4 input:checked + label {background: #52e052; z-index: 6;}
.clear-shadow {clear: both;}
.papercontent4 {background: #e9fbe9;position: relative;width: auto;margin: -175px 0 0 120px;height: 400px;z-index: 5;
overflow: hidden;box-shadow: 1px 1px 2px rgba(0,0,0,0.1);border-radius: 3px;}
.papercontent4 div {position: absolute;top: 0;padding: 10px 40px;z-index: 1;opacity: 0;
-webkit-transition: all linear 0.5s;-moz-transition: all linear 0.5s;-o-transition: all linear 0.5s;
-ms-transition: all linear 0.5s;transition: all linear 0.5s;}
.papercontent4 div{-webkit-transform: translateY(-450px);-moz-transform: translateY(-450px);
-o-transform: translateY(-450px);-ms-transform: translateY(-450px);transform: translateY(-450px);}
.menutabviews4 input.tab-selector-1:checked ~ .papercontent4 .papercontent4-1,
.menutabviews4 input.tab-selector-2:checked ~ .papercontent4 .papercontent4-2,
.menutabviews4 input.tab-selector-3:checked ~ .papercontent4 .papercontent4-3,
.menutabviews4 input.tab-selector-4:checked ~ .papercontent4 .papercontent4-4 {
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);
-ms-transform: translateY(0px);transform: translateY(0px);z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);opacity: 1;-webkit-transition: all ease-out 0.3s 0.3s;
-moz-transition: all ease-out 0.3s 0.3s;-o-transition: all ease-out 0.3s 0.3s;
-ms-transition: all ease-out 0.3s 0.3s;transition: all ease-out 0.3s 0.3s;}
.papercontent4 div h2,
.papercontent4 div h3{color: #000;}
.papercontent4 div p {font-size: 14px;line-height: 22px;font-style: italic;text-align: left;margin: 0;color: #000;
padding-left: 15px;font-family: Cambria, Georgia, serif;border-left: 8px solid #52e052;}
HTML
<section class="menutabviews4">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1"> JUDUL 1 </label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2"> JUDUL 2 </label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3"> JUDUL 3 </label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4"> JUDUL 4 </label>
<div class="clear-shadow"></div>
<div class="papercontent4">
<div class="papercontent4-1">
<h2>JUDUL 1</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent4-2">
<h2>JUDUL 2</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent4-3">
<h2>JUDUL 3</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
<div class="papercontent4-4">
<h2>JUDUL 4</h2>
<p> SILAHKAN ISI YANG DI INGINKAN DISINI </p>
</div>
</div>
</section>
