July 24 2009
Easy CSS Star Rating Layout
Today I bring you an easy and quick CSS tip for making Star Rating layouts, only with the use of CSS. The great thing about this one that I’m about to show you, is the fact that it’s continuous, meaning, it will work with percentage.
Confused?
- Let me show you an example!
As you can see they’re not just full or not full, they’re half full, 1/4 full, etc…
To achieve this you only need to have 2 images, them being:
From now on it’s only CSS and a really simple HTML to call the code and inform the % that you would like to use.
.classification { position: relative; width: 91px; height: 17px; } .classification .cover { position: absolute; background: transparent url(img/stars.png) top left no-repeat; top: 0px; left: 0px; width: 91px; height: 17px; z-index: 101; } .classification .progress { position: absolute; background: transparent url(img/stars_full.png) top left no-repeat; top: 0px; left: 0px; height: 17px; z-index: 102; } |
Basically we overlap one image on top of the other and we control the amount of Star we want to show with a given width in percentage.
<div class="classification"><div class="cover"></div<div class="progress" style="width: 27%;"></div></div> |
Where you see style=”width: 27%;” just change to what ever % you would like to fill.
We’re done! Easy? No? Yes? Rocket Science Hard? Let me know what you think.
Best regards!
Fantastic !!!
This is what I was looking for. And it is so easy.
Thanks a lot.
Glad you liked it and it was helpful Aayushi.
Hi Jose, so this is exactly what I am looking for for my wine blog as I use a 5 star rating system. Can use this in blogger? If so, how?
Hello Justin.
This is purely HTML/CSS based coding. I’m not 100% familiar with how blogger works but if you’re able to edit your HTML code you should be able to add this.
First thing you need to do is to upload the images to some place on your server, for this you can use the regular image upload when editing/adding a post.
After getting the image link add the CSS coding to you template header (it should be next to the tags).
Finally just add the HTML part to where ever you want in your post.
Let me know if you need anything else.
I am working on a new website using a Microsoft Expression Web 2 template. I am not an HTML coder and don’t really understand CSS, but can create okay in these templates. I would like to add the star rating system you have above to some of my pages, but not sure how. I can easily add the HTML coding to the page, not sure how to create the CSS or where to find the images to upload? Any help you have would be greatly appreciated. If not, I understand.
Hello Katrina,
You should send the images to your FTP or any image hosting service out there.
To add the CSS you need to create a new file (called rating.css for example) and add the code I provide on the post.
After that you need to go to your HTML code and before the tag add the following:
<link rel="stylesheet" href="http://www.example.com/rating.css" type="text/css" media="screen" />This is an example. Remember to change http://www.example.com with your own domain.
You should also edit the CSS code i provided. Where you see
background: transparent url(img/stars.png) top left no-repeat;and
background: transparent url(img/stars_full.png) top left no-repeat;you should change img/stars.png and img/stars_full.png with the full code, for example, http://www.example.com/stars.png and http://www.example.com/stars_full.png
Please let me know if you require any further assistance.
Never mind… I figured it out. Thanks anyway for the great tip!
i like the way u move. thanx