Creating A Netflix Style Star Ratings
If you all go through the code, very simple rating is given using list. I have set the background image for <li> named rating.gif. This gif image is used in every <li> in vertical position with css background, And on mouse over width of second <li> increases to 20px & similarly width of third <li> also increases to 20px.
XHTML
<h1>CSS Ratings Selector</h1>
<ul class='ratings'>
<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>
CSS
.ratings{ list-style:none; margin: 0; padding:0; width: 100px; height: 20px; position: relative; background: url(rating.gif) top left repeat-x } .ratings li{ padding:0; margin:0; float: left; } .ratings li a{ display:block; width:20px;
height: 20px; text-decoration: none; text-indent: -100px;/*IE -10px, Firefox -100*/ z-index: 20;/*Require*/ position: absolute;/*Every anchor tag start fro top left*/
padding: 0; } .ratings li a:hover{ background: url(rating.gif) left bottom; z-index: 1; left: 0px; border:none;
}
.ratings a.one-star{ left: 0px; } .ratings a.one-star:hover{ width:20px; } .ratings a.two-stars{ left:20px; } .ratings a.two-stars:hover{ width: 40px; } .ratings a.three-stars:hover{ width: 60px; } .ratings a.three-stars{ left: 40px; } .ratings a.four-stars{ left: 60px; .ratings a.four-stars:hover{ width: 80px; } .ratings a.five-stars{ left: 80px; } .ratings a.five-stars:hover{ width: 100px;
}