CSS tricks to create star rating in an easy way

23 Apr

Let see some CSS tricks.
Some time we feel sick to display start rating. But we can do it very easily with CSS tricks. What we need a image with all combination of starts. See following one that I have used for my example:

We can adjust all this rating with CSS see the following classes


.rating-parts {
	background: url(star-matrix.gif) no-repeat 0 0;
	height: 16px;
	width: 80px;
}

.rate1 { background-position: 0px -16px; }
.rate2 { background-position: 0px -32px; }
.rate3 { background-position: 0px -48px; }
.rate4 { background-position: 0px -64px; }
.rate5 { background-position: 0px -80px; }

Now see the HTML for rating 3

<div class="rating-parts rate4"></div>


Here we are adjusting all image position with CSS for a particular element. See the following combination of class for rating

rate 0: rating-parts
rate 1: rating-parts rate1
rate 2: rating-parts rate2
rate 3: rating-parts rate3
rate 4: rating-parts rate4
rate 5: rating-parts rate5

😀

Advertisements

4 Responses to “CSS tricks to create star rating in an easy way”

  1. Shahed April 29, 2010 at 9:57 am #

    i like it!

  2. Dream Coder April 29, 2010 at 9:58 am #

    very good post.

    Thanks

  3. fabio May 5, 2010 at 9:21 pm #

    you could even make it slimmer by using just on line of stars.
    first 5 stars then 5 empty stars and then you just have to shift the image horizontally.

  4. Tanveer June 1, 2010 at 12:00 pm #

    woow!! really cool staff to regular use.
    Nice blog too 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: