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 :).

  • http://www.onetechstop.net Simon Tony Haslwanter

    Thanks this was really helpful! One question, is it possible to set the width and height of the rating-static class in % instead of pixels so that is looking good on the smartphone and smaller screens :)?

    • ls_milkyway

      I guess % will not help. The above solution can fit into mobiles and tablets; otherwise you can download the png file, reduce it to make 2 copies (1 for tablet and other for mobile) upload them on CDN and declare the proper code in CSS media queries.

  • ls_milkyway

    Thanks a lot.This is the best (css sprites) solution.

  • Saim

    I would like to use large star. What is the simplest way to do with your script?
    Thank you

  • Dindin

    Can you do the same with ten stars too?

  • Wera Morgan

    thanks!!! exactly what I was looking for, made my day 🙂

  • Ady Erfüllt

    thank you =)

  • ImmortalWind

    Excellent solution, clever and simple!

  • admin

    http://www.paycalculator.net.au

    Free Tax Calculator