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!

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:

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.

<div class="classification"><div class="cover"></div><div class="progress" style="width: 27%;"></div></div>

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!