Tag Archives: rating star

Color Stars Icons (PSD)

Releasing color stars icon with 6 six colors with standard icon sizes. These icons are very useful for website, blog, applications etc. You can use these icons for personal or commercial works but forbidden to redistribute other than bijusubhash.com. Download the PSD below.
color-stars
Color Stars (1400)
Format: PSD
Color theme: red, yellow, blue, green, gray, white.
Keywords: star, icons, color-stars, rating star,
License: Creative Commons Attribution-No Derivative Works 2.5 India License
Author: bijusubhash.com

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Rating Star with CSS

Rating Star with CSS

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. */

3) Demo

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]