Abdullah Rubiyath :: Alif's Web

Recently, I have been working on an Application which involved rating system. There are 2 cases where we would want to show the ratings of a content to the viewer. On 1st case, we would just want to display the list of contents (videos, blogs etc.) with its rating (just displayed) to the viewer. On another case, we would show the rating and also allow viewer to interact and rate the content. There are already several blogs relating to 2nd case (CSS Star Rating), so, I will only discuss the 1st case.

After looking at various sites and some thinking, I found a neat way of displaying the 'star' ratings using CSS Sprites. The credit actually goes to YouTube (they implemented rating systems this way).

This technique is used 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.)

I 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