TUTORIAL: 5-Star Ratings Using 1 Image and CSS

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Introduction


You don't need more than one image to have 0-5 star ratings.
All you need is a single image containing two different states, some CSS, and the same logic you would use to setup the multi-image based ratings on the backend.

Rating Image


I've attached an image with some simple stars in two states which will accommodate 0-5 stars. The dimensions of the rating block will be 100x20 which works out to 20px by 20px stars and makes the image 200x20.

Attachments:
stars.png

There is no copyright on this image, I made it specially for this tutorial and you are free to use it for any purpose other than assigning ranks to an army of mutant beavers.



CSS Classes


Now since ratings are generally something that will be used numerous times on the same page, we want to use classes for our CSS selectors. Below I have a base "star" class with the common attributes of each rating and 5 sub-classes which give me a total of 6 different ratings. (0-5)

It simply shifts the background-position of the image to the left which puts one of the off-state stars out of view on the left and brings one of the on-state stars into view on the right.

CSS Code: [ Select ]
.stars, .stars0
{
   background: transparent url("stars.png") no-repeat top left;
   width:100px;
   height:20px;
   float:left;
   display:block;
   margin: 5px;
}
.stars1 {background-position:-20px;}
.stars2 {background-position:-40px;}
.stars3 {background-position:-60px;}
.stars4 {background-position:-80px;}
.stars5 {background-position:-100px;}
  1. .stars, .stars0
  2. {
  3.    background: transparent url("stars.png") no-repeat top left;
  4.    width:100px;
  5.    height:20px;
  6.    float:left;
  7.    display:block;
  8.    margin: 5px;
  9. }
  10. .stars1 {background-position:-20px;}
  11. .stars2 {background-position:-40px;}
  12. .stars3 {background-position:-60px;}
  13. .stars4 {background-position:-80px;}
  14. .stars5 {background-position:-100px;}


With it setup like that all I need to have the backend do is output a number into the HTML using PHP/ASP/CFML/etc for however many stars are needed.

HTML Element


Here are examples of what each stars HTML looks like when it's being used.

HTML Code: [ Select ]
<div class="stars stars0"></div>
<div class="stars stars1"></div>
<div class="stars stars2"></div>
<div class="stars stars3"></div>
<div class="stars stars4"></div>
<div class="stars stars5"></div>
  1. <div class="stars stars0"></div>
  2. <div class="stars stars1"></div>
  3. <div class="stars stars2"></div>
  4. <div class="stars stars3"></div>
  5. <div class="stars stars4"></div>
  6. <div class="stars stars5"></div>


I could get away with not using a stars0 class and just using the base stars class when there are no stars for the rating, but having that zero class simplifies the backend operation so that it just has to output a number.

PHP Code: [ Select ]
<div class="stars stars<?php echo round($rating); ?>"></div>


Conclusion


There you have it. 5 stars, one image. A little more CSS needed than your usual <img> based solution, but one-fifth of the images and possible connections to the server and HTML that really isn't any more complicated.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

This is a very handy tutorial... thanks Joebert :)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

joebert wrote:
stars.png

LOL @ mutant beavers.

Post Information

  • Total Posts in this topic: 3 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.