I came across this Youtube HTML 5 demo via Laura Carlson and was amazed at their simple sprite solution for static ratings display. Here is how to create one.

Caveat

This solution is only for displaying a static rating and not an animated one.

I am using the word “star” a bit loosely in this post. The “star” in the sprite below is a circle for the sake of simplicity.

Image

Create a sprite as shown below. I have created each circle within an imaginary 20px box so that it is easier to style via CSS. You can use my reference Photoshop file where I have used guides to position each circle at intervals of 20px.

HTML

Put this HTML where you want your ratings to appear:

<span class="rating r0">0/5</span>

The class rating will be used to apply all the common style properties. Classes r0 to r5 will be used to position the sprite as a background image appropriately.

CSS

In your CSS file, add the following:

span.rating {
  background:url("star.png") top left;  
  display:inline-block;
  width:100px; /* width of the set of 5 stars */
  overflow:hidden;
  text-indent:-1000em;  
}                                     

Creating the rating

Now we style each of the r0 to r5 classes.

span.r0 {
  background:-50px 0;
}

span.r1 {             
   background-position:-60px 0; /* assuming each star is 20px wide */      
}      

and so on…

If you use SASS you can add this to your SASS file:

// 100 is the width of the set of 5 stars and 20 is the width of each 
// star (including the space to the right, see the Photoshop file

@for !i from 0 through 5
  span.r#{!i}
    background-position = "#{-(100 - (20*!i))}px 0" 

Here is the demo of the star ratings sprite.

Advantages

• Single image, lesser page requests, faster page load.
• Small file size
• Easier maintainance: You only need to edit one image file in case you want to change the graphic.