Slim star sprite

by Kriem

HTML

<p>I’ve always thought that the sprites used to make star ratings <a href="https://www.google.com/search?hl=en&amp;safe=off&amp;rlz=1C1CHKZ_enGB432GB432&amp;q=star+rating+sprite&amp;ion=1&amp;bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&amp;biw=1451&amp;bih=907&amp;um=1&amp;ie=UTF-8&amp;tbm=isch&amp;source=og&amp;sa=N&amp;tab=wi&amp;ei=4KkaUKTlJsmm0QXK6YDAAQ">seemed a little big</a>, so I made this:</p>
    
<span class="stars s-0-5">
    0.5 stars
</span>

<span class="stars s-1">
    1 star
</span>

<span class="stars s-1-5">
    1.5 stars
</span>

<span class="stars s-2">
    2 stars
</span>

<span class="stars s-2-5">
    2.5 stars
</span>

<span class="stars s-3">
    3 stars
</span>

<span class="stars s-3-5">
    3.5 stars
</span>

<span class="stars s-4">
    4 stars
</span>

<span class="stars s-4-5">
    4.5 stars
</span>

<span class="stars s-5">
    5 stars
</span>

<hr>

<p>Here’s the sprite itself:</p>

<img...

CSS

.stars{
    position:relative;
    display:block;
    
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}
.stars,
    .stars:after{
        width:80px;
        height:16px;
        background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAwCAYAAACVMr0DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA19JREFUeNrsmc9vUkEQx6dIIG1AlDRE0oNIAtGT+BcU/xK8mfTUP8E/wVMTb/Y/0b/AeiA2kCbtwfRY6SOQkr7ozDDPwvux+2DjwexsMm8fb/ez28zwhtlvAQzt9ycYkMGWTXkYFC1zPkh/uuUe3vMFk/exa5FtE0Xll3zBGL19vO6vRXKz6CsPhQzvH3L0DvB6wI9a8ixv9JQXfgc/PJdXoYf2BK3Pn6tor4T4gRbAJV7JvqD9QjuTz6B8Nk8O/saDJbyW0fakfyo9tTu0G+ln0i945ExmKJ/Bk4NrHJVHOOk13tnqinu072ghL96Xp8pn8IWd9zDhiQScywKmxc8fFidWeTPPP3J/J80Mm0SLzx4Wj4aUz+YLsUnHnGPClA1CyT84Z3Vx5c18vExr8bWcskE5Nie9KR/ji4kJVbm7Rfsp91QLPkarcrli3kD5NT7u4B5fR1LpLWs+yj19rvBW56Q35WN8MkUEPHgpifwtGSdwehbkeEWUX+PjR7wbk7Ah8t2NYVz5TYQh1XPdeMhxblE92I0H1YP/EW91sOq5zny2g1XPdePXTniqB7vxWIpd2RyserADjw5+Y6si+hyVEDfpZNQVtNGzmB4KMT3Ubz47B6ue68Zbc/BKYl/+Z2MPI/kyJZIGPVT5HFWE6rlufN4yTfVcN956VFY91423Olj1XDc+R4pQPdeFtx4RVc914DduJycnAzLlVQ/+//RgiRzrodtE0Xc+lx5cr9eBbFs91XM+28EYMdZDm80mkEkUDzeIvtf82gkRwVQ9uFKptLrd7rIsHI1gOp1upKf6wh8dHV3ZHMx6cKlUArLd3V0ol8tQq9W4Zzn07g4mkwn38/kcFosF26qe6iuPDs6nB4dh2Gu321AsJgsL2qjRaCxFpft7GA6HCT3Vcz47B2MEWA/FDc7G4zEvkCmH4hjNobnEEOs7n1sPxlTBeii+Ir1Op5OIZLQ4viKpi/vOW6sIAY4px2CEknIoPqMxmpO2uO/8RnpwlNzjeSivnuoxb9eDsTzhmyAI4Pr6mu+pFqxWq0BjWK4Y/0DP+Xx68MXFBZclkR6KuadPZUtePdVj3v4NxgiBFNTvMNd8jU42uOHn6Gxu+gZ4ztsdLAufxn4AaKMXInp8tOQwn/lE+yPAABByjtrMSf8AAAAAAElFTkSuQmCC") no-repeat;
    }
    .stars:after{
        content:"";
        position:absolute;
        top:0;
        left:0;
        background-position:0 -32px;
        opacity:0.5;
        z-index:-1;
    }

.s-0-5  { background-position:-80px   0  ; }
.s-1    { background-position:-64px -16px; }
.s-1-5  { background-position:-64px   0  ; }
.s-2    { background-position:-48px -16px; }
.s-2-5  { background-position:-48px   0  ; }
.s-3    { background-position:-32px -16px; }
.s-3-5  {...

JavaScript

/*
    An even better version I made: http://jsfiddle.net/csswizardry/KL5Vs/
*/