Cara Membuat Skill Bar dengan CSS3 - Style #1

KURAZONE ~ Cara Membuat Skill Bar dengan CSS3 - Style #1, 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 pertama. 

Hasil dari style pertama ini akan nampak seperti Skill Bar dibawah ini :
Contoh
40%
Contoh
55%
Contoh
95%

Pada umumnya, skill bar dirancang menggunakan javascript untuk memunculkan animasi pada progress skill bar, namun dalam skill bar kali ini kita tidak menggunakan javascript tersebut, yang kita perlukan hanyalah kombinasi dari HTML dan CSS saja. Sehingga kehadiran Skill Bar semacam ini tidak memberikan dampak yang besar pada kecepatan halaman blog. Nah, tertarik ingin membuat Skill Bar style pertama ini? Berikut adalah kode - kode dalam pembuatan Skill Bar Style 1 :
.skillst2 {width:100%;color:#fff;}
.skillst2 .skillbar{width:100%;height:40px;position:relative;margin-bottom:5px;}
.skillst2 .count-bar{height:100%;width:0px;position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.skillst2 .count-bar.color-1{background-color:#338ae7;}
.skillst2 .count-bar.color-2{background-color:#fe871f;}
.skillst2 .count-bar.color-3{background-color:#bd5cb9;}
.skillst2 .count-bar.color-4{background-color:#2d7da5;}
.skillst2 .count-bar.color-5{background-color:#f75d41;}
.skillst2 .title{font-size:14px;font-weight:400;padding-left:12px;line-height:40px;text-transform:uppercase;}
.skillst2 .count{position:absolute;top:0;right:12px;line-height:40px;font-size:14px;font-weight:400;}
<div class="skillst2">
<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">PHP</div>
<div class="count"><span>70%</span></div>
</div>
</div>
<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>
</div>

Note :
  • Penempatan kode CSS bisa diterapkan didalam Template, lebih tepatnya diatas kode ]]></b:skin>.
  • Atau jika ingin meletakkan CSS didalam artikel maka ubah mode penulisannya ke mode HTML terlebih dahulu, lalu buatlah <style> dan </style>. Letakkan kode CSS nya diantara kode <style> dan </style>
  • Sedangkan untuk penempatan kode HTML diletakkan didalam artikel dengan mode HTML (bukan compose).

Apabila kalian berhasil menerapkan kode Skill Bar style pertama ini, maka hasilnya akan nampak seperti dibawah ini :

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

Mengenai warna dan panjang skill bar, tinggal dimodif sesuai keinginan

Itulah informasi mengenai "Cara Membuat Skill Bar dengan CSS3 - Style #1", selamat mencoba dan semoga bermanfaat.







Lebih baru Lebih lama