Displaying Star Rating using CSS Sprites

Recently, I have been working on an Application which involved rating system. There are 2 cases where we would want to display ratings. On 1st case, we would just want to display the list of contents (videos, blogs etc.) with its rating (just displayed).

On another case, show the rating and also allow viewer to rate content. There are already several blogs relating to 2nd case (CSS Star Rating), so, I will only discuss the 1st case.

I use this technique to display both 0.5 star & 1 star rating. I start with a simple image of stars in 2 rows:

The Top row will be used to display full stars, (1,2,3 stars etc.)

The 2nd row of image will be used to display 1/2 stars, (0.5, 1.5, 2.5 stars etc.)

Declare a simple CSS Class called 'rating-static'.

.rating-static {
  width: 60px;
  height: 16px;
  display: block;
  background: url('http://www.itsalif.info/blogfiles/rating/star-rating.png') 0 0 no-repeat;
}

The Trick is to use the background-position to display full or 0.5 stars from that image. So, I declare some CSS Class for the ratings (1/2 and full stars):

.rating-50 { background-position: 0 0; }
.rating-40 { background-position: -12px 0; } 
.rating-30 { background-position: -24px 0; }
.rating-20 { background-position: -36px 0; }
.rating-10 { background-position: -48px 0; }
.rating-0 { background-position: -60px 0; }

.rating-5  { background-position: -48px -16px; }
.rating-15 { background-position: -36px -16px; }
.rating-25 { background-position: -24px -16px; }
.rating-35 { background-position: -12px -16px; }
.rating-45 { background-position: 0 -16px; }

I Like to declare the rating class as their actual rating multiplied by 10. So, an 2.5 rating's corresponding class is '.rating-25'. In this way, when I fetch the raw rating from back-end, I multiply it by 10 and just output it on the CSS class.

To display a 1.5 rating, just write the following:

To display a 2.5 rating, just write the following:

To display a 3 rating, just write the following:

Here's a display of all the star ratings (0.5 to 1.0):

Thats it. Simple enough :).

Attachment	Size
rating-sprites.zip	3.91 KB