Skip to content

Instantly share code, notes, and snippets.

@whistler

whistler/star.css

Created February 13, 2012 18:56
Show Gist options
  • Save whistler/1819065 to your computer and use it in GitHub Desktop.
Save whistler/1819065 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Stars
Raw
star.css
Taken from: http://www.joseairosa.com/2009/07/24/easy-css-star-rating-layout/
Images: http://www.joseairosa.com/wp-content/uploads/2009/07/stars.png
http://www.joseairosa.com/wp-content/uploads/2009/07/stars_full.png
.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;
}
Raw
star.html
<div class="classification"><div class="cover"></div><div class="progress" style="width: 27%;"></div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment