Make System Rating Star only use CSS

Sobat mungkin pernah melihat tampilan persentase data skill seseorang atau seperti itulah. Menampilkan presentase mirip dengan trick membuat rating star memakai CSS. Jika persentase biasanya berbentuk chart table bars, ya kalau star rating pasti bergambar bintang :d Jika tidak terlihat efek loading, maka refresh lagi halamannya ;) how to make animated skill bars with css3

Itulah cara membuat bars dengan CSS3, silahkan dipelajari sendiri ya 8-> Koben sekarang akan berbagi tutorial cara membuat rating star dari berbagai resource terkemuka :p

Accessible star rating widget with pure CSS

Create a rating system with css, web fonts and sprites

Displaying star rating using css sprites

Display star ratings using css sprites

CSS star rating

Terakhir Koben ambil source makes rating star dari Valoración de estrellas en el blog por parte del autor Yang akhir ini sedikit sama teknik penulisan markup HTML-nya dengan trick Css progress bar For fun Play css progress animated bar!

.bintang {
width: 100px;
border: none;
font-weight: bold;
font-size: 12px;
}
.starImg {
width: 100px;
height: 21px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjWU3qaCUR8ruIH6jJjxbI13gHIdyAmF_hqUsNCjw15WfXq70EUcUtj6hyGwr323VuLK7ZzgI0WjbUSGM7FHh8fQ_Dz6ghKgSSe0zzrA__qyneZcyH0PbE4SMrr9f5Z25ek2gdtCnl9k/s1600/star.png) 0 0 no-repeat;
}
.star-0 {background-position: -100px -0;}
.star-5 {background-position: -81px -21px;}
.star-10 {background-position: -81px 0;}
.star-15 {background-position: -61px -21px;}
.star-20 {background-position: -60px 0;}
.star-25 {background-position: -40px -21px;}
.star-30 {background-position: -40px 0;}
.star-35 {background-position: -21px -21px;}
.star-40 {background-position: -21px 0;}
.star-45 {background-position: 0 -21px;}
.star-50 {background-position: 0 0;}

MarkUp HTML<fieldset class="bintang"><legend>Rating: </legend><span class="starImg star-0"></span></fieldset>
<fieldset class="bintang"><legend>Rating: </legend><span class="starImg star-10"></span></fieldset>
<fieldset class="bintang"><legend>Rating: </legend><span class="starImg star-20"></span></fieldset>
<fieldset class="bintang"><legend>Rating: </legend><span class="starImg star-30"></span></fieldset>
<fieldset class="bintang"><legend>Rating: </legend><span class="starImg star-40"></span></fieldset>
<fieldset class="bintang"><legend>Rating: </legend><span class="starImg star-50"></span></fieldset>DEMO

Rating 1

Rating 2

Rating 3

Rating 4

Rating 5

Happy rating \m/