An updated and more cross-browser compatible version of the CSS star rater can be found here.
This is my first contribution to the CSS loving community. So, many of you have seen a blog. Many of you have seen comments and reviews on sites such as Netflix and Amazon. Most of these reviews, as in Amazon’s case or Movies, as in Neflix’s case come with a handy dandy rating. I’ve even seen the star rating system used at msn.com. Many of these solutions may use JavaScript or just have an individual hover state for a single star. The question I pose is…. Can you create a star rating using only CSS. I’m talking the kind that when you hover over the 4th star, there are four stars that show up on the hover state. Well, I’m glad you asked because that is just the question I intend to answer.
But! Before we get into the action, I know I like to see a working example first, so here, check this out.
Step 1: XHTML
First, lets get to structure. A star rating simply is a list of links, correct? So, we will create a simple list of links. We will give it a class of “star-rating” and class the links and title them appropriately. Lets do this. Viola:
xhtml:
- <ul class=’star-rating’>
- <li><a href=’#’ title=’Rate this 1 star out of 5′ class=’one-star’>1</a></li>
- <li><a href=’#’ title=’Rate this 2 stars out of 5′ class=’two-stars’>2</a></li>
- <li><a href=’#’ title=’Rate this 3 stars out of 5′ class=’three-stars’>3</a></li>
- <li><a href=’#’ title=’Rate this 4 stars out of 5′ class=’four-stars’>4</a></li>
- <li><a href=’#’ title=’Rate this 5 stars out of 5′ class=’five-stars’>5</a></li>
- </ul>
This list that we create would potentially have href’s pointing to the correct page. Also, you could use Ajax to attach a different action to each link, but we will not cover that here. It suffices to say that we will just point them to the correct page for that rating.
Step 2: Graphics
We don’t event know what this thing is going to look like. I’d love to make this a transparent PNG, but because an evil nerd with lots of money has a proprietary browser with its own set of quirky rules, transparent PNG images don’t behave well when using CSS background manipulations, such as when using background-position. So, we will go with the all so ancient GIF. Bam! Here is the GIF image:
This image has a hover state, which is the bottom star and a normal state, which is the top star.
Step 3: CSS
Lets get into the meat of the CSS. First, I always style the parent-most element, in this case the UL (Unordered List) with a class of ’star-rating’:
- .star-rating{
- list-style: none; – turn off the default list image bullets
- margin: 3px; – I wan’t some space around this thing
- padding: 0px; – I’m anal. I’m pretty sure OL’s have a default padding of 0px, but we’ll set it to 0px just to be safe
- width: 100px; – This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide
- height: 20px; – The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.
- position: relative; – Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.
- background: url(star_rating.gif) top left repeat-x; – By repeating this image horizontally, the list will appear to have five stars.
- }
So, in review, to any object with a class of “star-rating”, we did the following:
- removed the bullets
- gave it a small margin
- removed the list indent entirely
- made the entire list 100 pixels wide and 20 pixels high
Now for the list items, here is the css:
- .star-rating li{
- padding:0px; – no padding at all
- margin:0px; – no margin at all
- /*\*/ – Backslash hack, this causes IE5 Mac NOT to see this rule
- float: left; – for any other browser, we are going to float left, this makes a horizontal list
- /* */ – end the IE5 Backslash hack
- }
Basically, this css tells all list items within an object with a class of “star-rating” to be horizontal, rather than vertical. There is a CSS hack called the backslash hack to make the float: left; rule invisible to IE5 Mac.
Now for the anchor items within the list items, here is the css:
- .star-rating li a{
- display:block; – we want a block item, so that we can mess with its height and width
- width:20px; – easy stuff, we want the width to be the same as the star width
- height: 20px; – same as the width
- text-decoration: none; – remove the underline from the link
- text-indent: -9000px; – indent the text off the screen using a image-replacement technique, we dont want to see the text anymore.
- z-index: 20; – we’ll come back to this
- position: absolute; – we can now control the exact x and y coordinates of each star, relative to the parent UL
- padding: 0px; – once again, we don’t need any padding
- background-image:none; – we will not show the star
- }
- .star-rating li a:hover{
- background: url(star_rating.gif) left bottom; – this is where the magic is
- z-index: 1; – move this star to the bottom of the z-index stack
- left: 0px; – move this star all the way to the left, aligned with the side of the UL parent item
- }
In review, the CSS for the anchor items is not too complex. Basically we are making the anchor items as big as the star graphic and pushing their inner text off the screen. You will not see the actual anchor items, but rather it is like having a set of invisible hot spots.
As for the :hover state, this is where the CSS magic is. When the users hover, the specific link that they are hovering gets pushed all the way to the bottom of the z-index stack. The link then has a background image load in, but the background is shifted 20 pixels down to the bottom, which now shows us our over state image. The link gets pushed all the way to the left hand side.
Now, I know what you are thinking. You are thinking, wait, if the link shifts all the way to the left, then the :hover state will end and then the star image will dissappear! You are correct, and very smart too. But, wait! We have not finished the CSS yet. Lets see if the next CSS Rules change what is happening at all.
Also, you may think, why repeat the image horizontally if the link is still 20 pixels? Why even put the repeat-x rule there? Another good question. The goal when you hover over the link is to do this:
- push the link all the way to the left – weve done this
- make the over state of the image show – weve done this
- make the link as wide as however many stars it should have – i.e. 3 stars = 3 x 20px per star = 60px – we have NOT done this yet
- repeat the star graphic horizontally so it looks like we have that many stars – we’ve done this
So, on to the remaining CSS. Since each star has a different width based on how many stars it is, we have to have an individual rule for each star link. This is why we put a class on each different link.
- .star-rating a.one-star{
- left: 0px;
- }
- .star-rating a.one-star:hover{
- width:20px;
- }
- .star-rating a.two-stars{
- left:20px;
- }
- .star-rating a.two-stars:hover{
- width: 40px;
- }
- .star-rating a.three-stars{
- left: 40px;
- }
- .star-rating a.three-stars:hover{
- width: 60px;
- }
- .star-rating a.four-stars{
- left: 60px;
- }
- .star-rating a.four-stars:hover{
- width: 80px;
- }
- .star-rating a.five-stars{
- left: 80px;
- }
- .star-rating a.five-stars:hover{
- width: 100px;
- }
This last block of CSS is fairy easy to explain. The goal here is to make each link as wide as how many stars it is x 20px only when the link is hovered. This way a link with four stars will be 0px from the left and 80px wide. This causes the link to still be located under the mouse, so we do not lose our :hover state. So, each link on :hover needs to be as wide as its number of stars x 20px, i.e. for two stars, 2 x 20px = 40px, for three stars 3 x 20px = 60px and so on and so forth.
You’ll notice that there is also a style for each link in its normal, NON-hovered state. This is because each link is absolutely positioned. If we did not put a left coordinate on them, it would be hard to tell where each link would be horizontally positioned in each browser. This way, we can have fine-tuned control of the horizontal positioning of each link.
And thats it! For a live page that contains a working sample, go here. If you have any questions at all, please feel free to comment.
yo, this is great. you’ve got all this knowledge under your belt now, why not give back to the community. This kind of stuff would be a definate attraction to the site. I think you should just create a section for this. TUTORIALS! I can do one for you.
TUTORIAL: How to code the opposite of Logie and piss him off. by Masa Pain
dood. good idea. so, i created the tutorials section. now you just have to write one. what will it be? also, this cant be another of your ideas that fall flat bro, this ones gotta go…far. so what will it be my good man?
This was really a great tutorial. Sure can come in handy in the future.
Excellent website too.
I have a question for ya (maybe a tutorial):
Is it possible to just use CSS to style rows in a table so every 2nd line have different color? Like white, blue, white, blue and so on.
Cheers!
flashingarrow,
sure its possible. there have been a lot of articles written on striping tables or zebra-striping tables, so let me refer you to a great site for CSS tutorials: A List Apart.
Specifically, check out the Zebra Tables article.
Good Luck :)
i do table zebra’ing via server side when dealing with dynamic data. Create atleast on class that is for the color change and apply it to every other row via a modulas remander 2 per your row count. That way if the answer is 0, don’t strip, if it’s 1 apply the class.
btw, tingo wtf is the tutorials section?
I have to make a tab on “The Blog Scene” Navigation box. I have not yet made that tab. What tutorial are you thinking on writing ed?
i’m going to write the tutorial on lasik surgery of the brown eye.
Wow! Wonderful article. Thx
Hey nice work! Using one image only for rollovers is always a good idea.
Implemented it on my website, thanks a bunch!
Check it out on a game’s page:
http://www.gamegum.com
Dang proph3t, you are fast! You might want to check into your height or see if the padding is messed up at all. When you roll over the images, you can see a very small amount, maybe 1 pixel of the top of the star. Other than that, I am really glad to see that you were able to use it. Cheers.
Which browser are you using? In IE7 and Firefox I’m not seeing that, though I didn’t quite understand what you mean by 1 pixel at the top of the star.
Also, in IE if you move your mouse between stars it flickers between the hand and the text selector. Usually removing all whitespace inbetween the ’s works, but i tried that and it didn’t.
Also to note of, I’m using display: inline; on the li instead of float: left. Reason being is that I can center the stars.
[...] under: Standards — nortypig @ 11:47 am Creating A Star Rater Using CSS [...]
This is cool, but in terms of a review system, stars are just sooooo boring. I like what the good folks over at brotherjoe.com do instead:
http://brotherjoe.com/?id=1096
Great work. I will see if I can’t incorporate this onto Unmatched Style. At the time it seemed feasible for me to do mouseover, mouseout seeing as the rating system is based on XmlHttpRequest which is web 2.0 and we know that JS is ok in Web 2.0; but with a CSS alternative I might have to do some digging into this.
Excellent work once again.
Why not use an Ordered List instead of an unordered list. Rated stars certainly imply an order. Not that it’d make an real difference, just being a stickler. heh
A nice tutorial. I made some a variant from the basic star rater a couple of months ago (a game rater, ?
[...] greifen. Bewertungssysteme die Sternchen-Grafiken nutzen sind vielen von uns bekannt, auf komodomedia.com gibt es ein Tutorial wie man so was mit XHTML & [...]
[...]
Zitat des Tages: an evil nerd….
Beim Lesen des Blogeintrags “Creating a Star Rater using CSS” im [...]
[...] on Robert Basic, 29.08.2005 – 12:27
abgelegt unter: Links
via Perun auf ein Bewertungssystem mittels CSS aufmerksam gemacht worden und dabe [...]
to ryan latham,
i started work on a AJAX solution as well. i still think you should keep it CSS and then link the pages initially to a NON-AJAX enabled page would be best. Then users with JavaScript turned off or the absence of Ajax can still use it.
to mooz,
I issue you a challenge. I notice in your css that you use a bunch of images for each rating state. Try using only one image. This is your challenge. Take it if you dare.
Excellent tutorial. I was looking to do a rating system using JS on a site I’m working on, but this is a much better solution. You should write some more tutorials like this.
Thanks.
Ok, so i read thru this and love the idea. Now, how the hell would i go about tracking and displaying the amount of stars that people are rating things.
i other words. i want to use this rating system on all my articles on my website. how do i do it?
[...] ich auch in anderen F?
Dankster –
use xml if you’re not going to have a bunch of stuff to rate. if you are, use a db and apply an onclick event or something to create a db update. Logie was talking about his ajax solution which may work.
Rogie –
Want me to write a tutorial on how to create the worst website in the universe! that would be an interesting contest: Make the ugliest website ev4r!
links for 2005-08-29
HOW-TO: Portable car pc – hack a day – http://www.hackaday.com _ (tags: car computer) NextApp . Echo2 (tags: ajax) script.aculo.us – web 2.0 javascript year-old terminal-like technology it was originally is gradually giving way to new ways of doing…
[...]
css-based star ratings
Very slick little CSS site, Komodo Media, has a nice tutorial on how to use CSS [...]
Dankster –
I see two ways of doing this.
Option 1: Client Side
Use a technology such as Ajax or inline frames to send a request to your server.
On the server side, you would have to develop a dynamic page either processed by the IFrame or sent to by Ajax via JavaScript to take in variables and insert/update them in a database. For instance, you may have a itemid, rating, and user columns for your rating system. Then you can send via Ajax or IFrame to this page the variables itemid, rating(the rating given by your CSS Star Rater), and the user that rated it.
Option 2: Server Side
Just have the links goto that same database page as in the Client side example, but in this case, have that same page receive one more variable called redirect_page. Test on the server side if that redirect_page variable has a value. If so, then redirect back to the originating page.
Let me know if this helps!
Nice stuff. I did a similar example for a reader a while ago.
My method used radio buttons (which have the advantage of being able to retain the clicked rating state).
You might like to check it out here…
http://www.flog.co.nz/2005/05/10/request-from-the-audience-arc-based-star-rating-system/
[...] « Become a Photoshop Expert Create Star Ratings with CSS Creating a Star Rater using CSS
[...] pending on screen size. For those who want to see some more great tricks then check out Creating a Star Rater using CSS… it’ [...]
[...] o register your vote and they light up using only CSS. Flippin sweet! (5 stars, heh.) Creating a Star Rater using CSS – Blog – Komodo Media Creatin [...]
Something exactly what we wanted for our DVD rental site. Thanks a lot. So for a serverside data fetching we can use another 1px gif that changes the SRC path dynamically somebody ‘rates’ a movie (or some other article).
imgObj.src=’http://somesite.com/rate.aspx?rating=5&id=2322
And the rate.aspx should deliver a 1px gif image.
Gran Masa Pain,
Do it Do it. Write an article on how to make the worst website ever. That would be excellent.
that helps…but its way over my head. i could only copy and paste code where you tell me it goes :(
well, dankster, I haven’t written the back end code and database for tracking ratings for certain items. Sorry :(.
That’s oneneat effect! Cheers!
[...] rom Komodo Media gets 5 Stars
Komodo Media has a great article titled “Creating a Star Rater using CSS” that makes creating a st [...]
[...] do/read relation article) Microsoft Windows XP – DiskPart (tags: software/must) Creating a Star Rater using CSS
to logie,
I accepted your challenge and made my game rater with only one image. ( http://www.robarov.be/rate/ )
Now where can I collect my award? ;)
mooz,
your prize is knowing that you are l33t and that you did a job well done. cheers and thumbs up to you! that rater is flippin’ sweet!
Wow, I was just looking for something like this yesterday. Good stuff, man!
[...]
davidbisset.com
Creating a Star Rater using CSS Doing it the long way as compared to just using images, but an inte [...]
That’s dope. Thanks!
Hey Leute,
bin ?
It was fun visiting here. Wishing you a great day! Extensive methods for this: http://www.techteacherblog.com/archives/2005/09/05/show-off-student-work-with-a-full-size-poster/ , 1 small clove garlic
two thumbs up!!! extensive methods for this: http://www.techteacherblog.com/archives/2005/09/05/show-off-student-work-with-a-full-size-poster/ , 1 small clove garlic
[...] ent job of stepping the process out for you, and the end product looks great. Here is his tutorial. The second rating tool I found was written by Adam B [...]
[...] ich auch in anderen F?
This tutorial rocks — but how can I log the ratings into like a database???
evan, check out comment #30 in this article for some direction on your question.
how would i display the average rating using this approach? say i have a rating of 3.5 stars. It should display that as the start value on page load. any ideas?
Thanks
Good question Lala,
I’ve thought about that one too. Let me see if I can get something working for you.
[...] i” con i css molto interessante. Rounded Corners Rounded Corners without images Creating a Netflix style star ratings Tableles [...]
Anyone have any back end code they’d like to share to track the status of these? I’d love to see both an XML solution and a database driven one. Anyone, anyone?
/signed
When I put this star rater in a table cell it falls apart under MS Explorer (fine in Firefox). Does anyone who understands css know what is happening ?
antony,
I know not of which you speak. I recreated your scenario with the star-rater in a table filled with content and many rows and columns. I tried it in both firefox and IE6 & IE 5.5. Let me know whats going on, cause on my end, things look sweet.
Rogie
logie, cool! :) be sure to let us know when it’s finished :)
also, once a user clicks on one of the stars, it would be nice if it stuck to that number. I guess that isn’t possible without javascript, right?
Thanks again
[...] has whipped up 20 CSS Tips and Tricks: Rounded Corners Rounded Corners without images Creating a Netflix style star ratings Tableless forms Styling [...]
What about already highlighted stars. Lets say the current rating is 3 stars and I want to go and change it. Then the first three list elements should look like:
1
Had a go with the CSS but can’t get it working properly. Already highlighted stars don’t get un-highlighted. Also had a go with another second image with blue stars… looks pretty, but not working properly either. Any ideas?
Cheers,
Jens
[...] Tech. Creating a Star Rater using CSS
While clever, this could have been developed quicker using standard script techniques and would have been more easily understood. Makes sense when you have this documentation in hand but someone else coming along to maintain would have to figure it all out.
CSS is best left to styling with script used for control. This goes beyond simple hover styling and into the realm of control.
What about back-end processing… This is basically a five star mouseover…
What form or server side solution handles the input and averages of user selections of the stars?
I’ve been looking for a long-time for a solution for a star rating system, that is not .PHP or .NET.
Where’s a link to a back end solution?
It was fun visiting here. Wishing you a great day! Revelations of John: http://www.circe-gets-laid.com/archives/002587_mating_in_captivity.html , out little pieces of bread and cups of juice
[...] , or 2 out of 4 stars, using the same image for both examples. So, using Mr. King’s concept, I was able to come up with an easy way to implement a [...]
[...] CSS, Tutorials, JavaScript — logie @ 1:30 am My last CSS tutorial, Creating a Star R [...]
[...] SS, Tutorials, JavaScript — logie @ 11:20 am My last CSS tutorial, Creating a Star R [...]
[...] ing CSS How to organize your css (tags: css design webdesign web tutorial articles) Creating a Star Rater using CSS star rating (tags: css w [...]
[...] ing CSS How to organize your css (tags: css design webdesign web tutorial articles) Creating a Star Rater using CSS star rating (tags: css webdes [...]
[...] e Generating Dynamic CSS with PHP A CSS Framework Avoiding classitis Architecting CSS Creating a Star Rater using CSS Introducing th [...]
[...] HAH Best resource for CSS/layout: In search of the One True Layout CSS – the coolest idea: Creating a star-rater with CSS Best article for CSS and browser [...]
[...] HAH Best resource for CSS/layout: In search of the One True Layout CSS – the coolest idea: Creating a star-rater with CSS Best article for CSS and browser [...]
[...] ch of the One True Layout La migliore idea realizzata con i CSS: Creating a star-rater with CSS Milgior articolo su CSS e browse [...]
[...] – Best resource for CSS/layout: In search of the One True Layout – CSS – the coolest idea: Creating a star-rater with CSS – Best article for CSS and brows [...]
[...] CSS, Tutorials, JavaScript — logie @ 3:44 pm My last CSS tutorial, Creating a Star R [...]
[...] s. Definately some useful stuff in there! Rounded Corners Rounded Corners without images Creating a Netflix style star ratings Tableless forms Styling L [...]
[...] y, General, CSS, Tutorials — logie @ 1:36 pm My last CSS tutorial, Creating a Star R [...]
links for 2006-01-10
Re-Introducing the Real Windows Vista Microsoft playing catch up? :) (tags: Apple humor Microsoft OSX) Creating a Star Rater using CSS (tags: CSS webdesign) Failed Redesigns “A failed redesign is a Web page created from scratch, or substantially upda…
[...] y, General, CSS, Tutorials — logie @ 1:36 pm My last CSS tutorial, Creating a Star R [...]
[...] geheten Star Rating-manier, onder sommigen ook al bekend van Stylegala. Nadat er eerder al een tutorial was verschenen hoe dit te bewerkstelligen middels [...]
[...] One True Layout CSS – the coolest idea: Creating a star-rater with CSS Best article for [...]
[...] ices 50 Best Firefox Extensions for Power Surfing Review on The Best Life Hacks of 2005 Creating a Star Rater using CSS Nifty Corners: rounded corners [...]
[...] Rounded corners without images Creating Netflix style star ratings Tableless forms Styling lis [...]
[...] Freitag has posted 20 CSS Tips and Tricks: Rounded Corners Rounded Corners without images Creating a Netflix style star ratings Tableless forms Styling L [...]
Ratings…
Here is a pretty nifty way of doing star ratings. All css and xhtml friendly. http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/…...
20 trucs CSS…
Voici s?
Creating a Star Rater using CSS
En vrac…
Bonjour, bonsoir, pour commencer ce billet du week-end, voici quelques liens :
Histoire de donner le vertige, la mosa?
53 CSS-Techniques You Couldn’t Live Without…
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the……
[...] http://www.komodomedia.com/blog/2005/08/…; Posted by Sergio Jasinski Filed in [...]