Hi folks, In this post I just describing about how to create rating star with CSS. You can create the mouseover effects verry easly with css. Only the functionality you have to add. Just try this.
1) HTML
<body> <div class="star1"> <div class="star2"> <div class="star3"> <div class="star4"> <div class="star5"> </div> </div> </div> </div> </div> </body>
2) CSS
.star1 { width:126px; height:126px; background:url(images/gray_star.png) no-repeat; } .star2 { width:126px; height:126px; background:url(images/gray_star.png) no-repeat; margin-left:126px; } .star3 { width:126px; height:126px; background:url(images/gray_star.png) no-repeat; margin-left:126px; } .star4 { width:126px; height:126px; background:url(images/gray_star.png) no-repeat; margin-left:126px; } .star5 { width:126px; height:126px; background:url(images/gray_star.png) no-repeat; margin-left:126px; } .star1:hover { background:url(images/gold_star.png) no-repeat; } .star2:hover { background:url(images/gold_star.png) no-repeat; } .star3:hover { background:url(images/gold_star.png) no-repeat; } .star4:hover { background:url(images/gold_star.png) no-repeat; } .star5:hover { background:url(images/gold_star.png) no-repeat; } /* The image icon you have to replace with your own and width and height too. */
Hi Biju,
excellent stuff. I am borrowing your code to generate the rating stars for a section of our website.
Many thanks,
Ioannis
Hi Biju,
Thanks for the star rating.
Building my first ever site with html5.
Also, I like your webpage design.
regards,
Tama
Awesome star, i was searching for. how can i use first as a colored form