CSS Cookbook

Building a better star-rater widget

What?

As a challenge to myself, I wanted to see if I could construct a star-rating widget that was superior to others offered, while using fewer images, less markup, less style information, and hopefully no javascript.

Why?

For an upcoming project I'm a part of, there might be *lots* of these on a page. They should be fast.

If the project decides to ditch them, well... it was fun coding.

Reference examples:

http://www.designshack.co.uk/tutorials/10-great-css-star-raters

Of those, the ones I found most compelling:

Results:

context labels for what you're about to click
one image:
ten CSS declarations
twenty HTML nodes per widget - only *one* of which has a class
no lines of Javascript
works in IE6/7, Firefox 2, Opera 9, Safari 3*

*on Win32 - have yet to check OSX

Examples:

Currently rated: 3 stars

Currently rated: 4 stars

Currently rated: 1 star

HTML:


				<div class="starRate">

					<div>Currently rated: 3 stars<b></b></div>

					<ul>

						<li><a href="#"><span>Give it 5 stars</span></a></li>

						<li><a href="#"><span>Give it 4 stars</span></a></li>

						<li><a href="#"><span>Give it 3 stars</span><b></b></a></li>

						<li><a href="#"><span>Give it 2 stars</span></a></li>

						<li><a href="#"><span>Give it 1 star</span></a></li>

					</ul>

				</div>

CSS:


				/* 'star-rating' component */

				.starRate {position:relative; margin:20px; overflow:hidden; zoom:1;}

				.starRate ul {width:160px; margin:0; padding:0;}

				.starRate li {display:inline; list-style:none;}

				.starRate a, .starRate b {background:url(img/star_rate.gif) left top repeat-x;}

				.starRate a {float:right; margin:0 80px 0 -144px; width:80px; height:16px; background-position:left 16px; color:#000; text-decoration:none;}

				.starRate a:hover {background-position:left -32px;}

				.starRate b {position:absolute; z-index:-1; width:80px; height:16px; background-position:left -16px;}

				.starRate div b {left:0px; bottom:0px; background-position:left top;}

				.starRate a span {position:absolute; left:-300px;}

				.starRate a:hover span {left:90px; width:100%;}