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 css3Itulah cara membuat bars dengan CSS3, silahkan dipelajari sendiri ya 8-> Koben sekarang akan berbagi tutorial cara membuat rating star dari berbagai resource terkemuka :p
Happy rating \m/
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/AVvXsEhVx8c-yy7kjCcXrE1vzH7TFjWjaNPDe6t_WJSauDprbaoj_1fhf66y7f1mRVAAWULJUaTv1Rfqi06dmOhMqagOzCYPmdRKfaalKOjiEPfeelY1gAnScm_XOXEVdYwO_mkKA5ve-3j527g/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>
DEMOLoading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...