Cara Membuat Skill Bar dengan CSS3 - Style #3

byKurazone Net -
KURAZONE ~ Pada kesempatan kali saya publikasi mengenai "Cara Membuat Skill Bar dengan CSS3 #style 3", seperti yang kita ketahui bahwa pembuatan skill bar ini biasanya dipakai untuk memberikan statistik atau review pada suatu produk, kinerja perangkat, rating dan sebagainya. Dikarenakan pembuatan Skill Bar ini menggunakan CSS3 maka akan ada beberapa style yang nantinya akan saya publikasi ulang dengan style yang berbeda. nah, pada kesempatan kali ini saya akan membahas untuk style yang ketiga. Artikel ini merupakan lanjutan dari style yang kedua (perbedaannya terletak pada bagian lokasi persen). Hasil dari style ketiga ini akan nampak seperti Skill Bar dibawah ini :

Contoh -
65%
Contoh -
75%

Selain perbedaan yang mencolok pada peletakan persen, style yang ketiga ini juga saya hilangkan fungsi jQuery nya, sehingga proses dalam meload skill bar lebih cepat dari style yang sebelumnya, sekaligus saya tambahkan efek melengkung pda border pojoknya. Nah, tertarik ingin membuat Skill Bar style ketiga ini? Berikut adalah kode - kode dalam pembuatan Skill Bar #style 3 :

.skillst3 {width:100%;color:#fff;}
.skillst3 .skillbar {width:100%;height:40px;position:relative;margin-bottom:10px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:#f5f5f5;}
.skillst3 .count-bar.color-1{height:100%;width:0px;position:relative;height:40px;-moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:red;}
.skillst3 .count-bar.color-2{height:100%;width:0px;position:relative;height:40px;-moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:green;}
.skillst3 .count-bar.color-3{height:100%;width:0px;position:relative;height:40px;-moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:blue;}
.skillst3 .count-bar.color-4{height:100%;width:0px;position:relative;height:40px;-moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:orange;}
.skillst3 .title{font-size:14px;font-weight:400;padding-left:12px;line-height:40px;text-transform:uppercase;display:inline-block;}
.skillst3 .count{line-height:40px;font-size:14px;font-weight:400;display:inline-block;}
<div class="skillst3">
<div class="skillbar">
<div class="count-bar color-1" style="width: 65%;">
<div class="title">HTML 5 -</div>
<div class="count"><span>65%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-2" style="width: 79%;">
<div class="title">CSS 3 -</div>
<div class="count"><span>79%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-3" style="width: 95%;">
<div class="title">jQuery -</div>
<div class="count"><span>95%</span></div>
</div>
</div>
<div class="skillbar">
<div class="count-bar color-4" style="width: 70%;">
<div class="title">SEO -</div>
<div class="count"><span>70%</span></div>
</div>
</div>
</div>

Note :
  • Penempatan kode CSS bisa diterapkan didalam Template, lebih tepatnya diatas kode ]]></b:skin>. Atau bisa diletakkan didalam artikel dengan mode HTML.
  • Sedangkan untuk penempatan kode HTML diletakkan didalam artikel dengan mode HTML (bukan compose).
Apabila kalian berhasil menerapkan kode Skill Bar style ketiga ini, maka hasilnya akan nampak seperti dibawah ini :

HTML 5 -
65%
CSS 3 -
79%
jQuery -
95%
SEO -
70%

Jika ingin menambah jumlah skill bar maka kalian bisa menambahkan kode CSS ini :
.skillst3 .count-bar.color-5{height:100%;width:0px;position:relative;height:40px;-moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:red;}
Contoh :

 Lalu perhatikan color-x nya (ubah ke nomor berikutnya), ubah juga warnanya

Untuk memanggil skill bar nya maka gunakan kode HTML dibawah (letakkan sebelum kode </div> paling akhir)
<div class="skillbar">
<div class="count-bar color-5" style="width: 70%;">
<div class="title">SEO -</div>
<div class="count"><span>70%</span></div>
</div>
</div>

Contoh :

Perhatikan juga class color-x nya (ubah ke nominal berikutnya)

Sisanya bisa kalian desain sendiri (misal menjadi tema gelap) :

Contoh -
55%

Itulah ulasan sederhana tentang bagaimana "Cara Membuat Skill Bar dengan CSS3 #style 3", silahkan berkomentar apabila menjumpai kesulitan, sekian wassalamu'alaikum.

Tags





Lebih baru Lebih lama