Jumat, 05 April 2013

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

Pure-CSSrating-widget

Create a rating system with css, web fonts and sprites

Rating-System

Displaying star rating using css sprites

Pstar-rating

Display star ratings using css sprites

star-rating-sprite

CSS star rating

star-ratingTerakhir 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/

Tidak ada komentar:

Posting Komentar