CSS tricks to create star rating in an easy way

Let see some CSS tricks.
Some time we feel sick to display start rating. But we can do it very easily with CSS tricks. What we need a image with all combination of starts. See following one that I have used for my example:

We can adjust all this rating with CSS see the following classes

.rating-parts {
	background: url(star-matrix.gif) no-repeat 0 0;
	height: 16px;
	width: 80px;
}

.rate1 { background-position: 0px -16px; }
.rate2 { background-position: 0px -32px; }
.rate3 { background-position: 0px -48px; }
.rate4 { background-position: 0px -64px; }
.rate5 { background-position: 0px -80px; }

Now see the HTML for rating 3

<div class="rating-parts rate4"></div>

Here we are adjusting all image position with CSS for a particular element. See the following combination of class for rating

rate 0: rating-parts
rate 1: rating-parts rate1
rate 2: rating-parts rate2
rate 3: rating-parts rate3
rate 4: rating-parts rate4
rate 5: rating-parts rate5