Easy CSS Star Rating Layout

post_stars

Today I bring you an easy and quick CSS tip for making Star Rating layouts, only with the use of CSS. The great thing about this one that I’m about to show you, is the fact that it’s continuous, meaning, it will work with percentage.
Confused?

- Let me show you an example!

stars1
Imagem 4

As you can see they’re not just full or not full, they’re half full, 1/4 full, etc…

To achieve this you only need to have 2 images, them being:stars_emptystars_full

From now on it’s only CSS and a really simple HTML to call the code and inform the % that you would like to use.

.classification { 
	position: relative;
	width: 91px;
	height: 17px;
}
.classification .cover {
	position: absolute;
	background: transparent url(img/stars.png) top left no-repeat;
	top: 0px;
	left: 0px;
	width: 91px;
	height: 17px;
	z-index: 101;
}
.classification .progress {
	position: absolute;
	background: transparent url(img/stars_full.png) top left no-repeat;
	top: 0px;
	left: 0px;
	height: 17px;
	z-index: 102;
}

Basically we overlap one image on top of the other and we control the amount of Star we want to show with a given width in percentage.

Where you see style=”width: 27%;” just change to what ever % you would like to fill.

We’re done! Easy? No? Yes? Rocket Science Hard? Let me know what you think.

Best regards!

24
Jul 2009
AUTHOR joseairosa
CATEGORY

Uncategorized

COMMENTS No Comments

Leave a Reply