thinkwithstyle

Like I said: true css-only rating system. No javascript involved (not even for ie6).

Here’s the html code:

<ul class="rating">
 <li><a class="worst" title="1 star" rel="nofollow" href="#a1">1</a></li>
 <li><a class="bad" title="2 stars" rel="nofollow" href="#a2">2</a></li>
 <li><a class="fair" title="3 stars" rel="nofollow" href="#a3">3</a></li>
 <li><a class="good" title="4 stars" rel="nofollow" href="#a4">4</a></li>
 <li><a class="best" title="5 stars" rel="nofollow" href="#a5">5</a></li>


 </ul>

It uses multiple classes for ul: we will add to ul.rating one more class from the five available- from worst to best, in order to display the current rating.

And here’s the css

ul.rating {list-style: none;position: relative;width: 100px;height: 20px;background-image: url("ratings.png");background-position: -100px 0;background-repeat: no-repeat;padding: 0;left: 50px;margin-left: -50px;overflow: hidden;}
.rating li {margin: 0;padding: 0;float: left;}
.rating li a {display: block;position: absolute;width: 20px;height: 20px;text-indent: -9999px;overflow: hidden;z-index: 20;}

ul.worst { background-position: -80px 0;}
ul.bad { background-position: -60px 0;}
ul.fair { background-position: -40px 0;}
ul.good { background-position: -20px 0;}
ul.best { background-position: 0 0;}

.rating a.worst { left: 0; }
.rating a.bad { left: 20px; }
.rating a.fair { left: 40px; }
.rating a.good { left: 60px; }
.rating a.best { left: 80px; }

.rating li a:hover {background: transparent url("star.png") left top repeat-x;left: 0;z-index: 1;}

.rating a.worst:hover {width: 20px;}
.rating a.bad:hover {width: 40px;}
.rating a.fair:hover {width: 60px;}
.rating a.good:hover {width: 80px;}
.rating a.best:hover {width: 100px;}

You can check it out here: http://thinkwithstyle.com/rating/

Posted in web development | RSS 2.0 | Trackback