Dapatkan panduan Web Design dan strategi blogging untuk blog atau website anda:
Di Panduan kali ini, Saya akan memberitahukan Cara Membuat Skills Bar dengan Animasi.
Fungsi skills bar ini adalah untuk memvisualkan hasil dari sebuah data sehingga terlihat lebih menarik.
Contoh penggunaannya:
Penampilan Skills bar-nya seperti ini:
<div class="tab_container">
<input checked="" id="tab1" name="tabs" type="radio" />
<label for="tab1">
<i class="fa fa-code"></i>Code</label>
<input id="tab2" name="tabs" type="radio" />
<label for="tab2">
<i class="fa fa-pencil-square-o"></i>About</label>
<input id="tab3" name="tabs" type="radio" />
<label for="tab3">
<i class="fa fa-bar-chart-o"></i>Services</label>
<input id="tab4" name="tabs" type="radio" />
<label for="tab4">
<i class="fa fa-folder-open-o"></i>Portfolio</label>
<input id="tab5" name="tabs" type="radio" />
<label for="tab5">
<i class="fa fa-envelope-o"></i>Contact</label><section class="tab-content" id="content1">
<h3>
Judul untuk Tab 1</h3>
Konten untuk tab 1.
Bisa disi dengan tulisan, gambar, video, iframe, dan yang lainnya.</section>
<section class="tab-content" id="content2">
<h3>
Headline 2</h3>
Sama seperti tab 1, tab 2 juga bisa disi dengan gambar, teks, video dan yang lainnya.</section>
<section class="tab-content" id="content3">
<h3>
Headline 3</h3>
Contoh untuk gambar:
<div class="separator" style="clear: both; text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNNDhKuNZMWAgphY5Kmgmhw7lYZV_NUfkeMVjF53EHm4nt3DJvXvTPvwMHHLecsVyRP17uV0bKdWOG-xLcTTnSWEneSgck9jmHlrGRqqBtqHGv3oLfHdkCN8gpQi9zAQtwbrkHmHDipRG/s1600/AXnael+Cover+New+Version.png" /></div>
</section>
<section class="tab-content" id="content4">
<h3>
Headline 4</h3>
Butuh contoh untuk video ?
<iframe allowfullscreen="" data="" frameborder="0" height="315" src="https://www.youtube.com/embed/jlQVAlmXqoE" width="560"></iframe></section>
<section class="tab-content" id="content5">
<h3>
Headline 5</h3>
Baca Panduan membuat Tab seperti ini: <a href="https://axnael.blogspot.com">AXnael Blog</a>.</section><style>
/*Fun begins*/
.tab_container{width:90%;margin:0 auto;padding-top:70px;position:relative}
input,section{clear:both;padding-top:10px;display:none}
label{font-weight:700;font-size:18px;display:block;float:left;width:20%;padding:1.5em;color:#757575;cursor:pointer;text-decoration:none;text-align:center;background:#f5f5f5}
#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3,#tab4:checked ~ #content4,#tab5:checked ~ #content5{display:block;padding:20px;background:#fff;color:#999;border-bottom:2px solid #f0f0f0}
.tab_container .tab-content p,.tab_container .tab-content h3{-webkit-animation:fadeInScale 0.7s ease-in-out;-moz-animation:fadeInScale 0.7s ease-in-out;animation:fadeInScale 0.7s ease-in-out}
.tab_container .tab-content h3{text-align:center}
.tab_container [id^="tab"]:checked + label{background:#fff;box-shadow:inset 0 3px #09C}
.tab_container [id^="tab"]:checked + label .fa{color:#09C}
label .fa{font-size:1.3em;margin:0 0.4em 0 0;display:inline-block;width:1.28571429em;height:auto;float:none;margin-left:-15px}
}
/*Media query*/
@media only screen and (max-width:900px){
label span{display:none}
.tab_container{width:98%}
}
/*Content Animation*/
@keyframes fadeInScale{
0%{transform:scale(0.9);opacity:0}
100%{transform:scale(1);opacity:1}
}
.clearfix:before,.clearfix:after{content:" ";display:table}
</style>
