HTML5 rating 1-5

<div class="rating r1"><table><tbody><tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr></tbody></table></div>

div.rating.r1 td{
 background: -webkit-linear-gradient(top, #8df 0%, #0cf 50%, #06f 100%);
 background: -moz-linear-gradient(top, #8df 0%, #0cf 50%, #06f 100%);
 background: -o-linear-gradient(top, #8df 0%, #0cf 50%, #06f 100%);
 background: -ms-linear-gradient(top, #8df 0%, #0cf 50%, #06f 100%);
}
div.rating.r2 td{
 background: -webkit-linear-gradient(top, #8f8 0%, #0f0 50%, #090 100%);
 background: -moz-linear-gradient(top, #8f8 0%, #0f0 50%, #090 100%);
 background: -o-linear-gradient(top, #8f8 0%, #0f0 50%, #090 100%);
 background: -ms-linear-gradient(top, #8f8 0%, #0f0 50%, #090 100%);
}
div.rating.r3 td{
 background: -webkit-linear-gradient(top, #ff8 0%, #ff0 50%, #aa0 100%);
 background: -moz-linear-gradient(top, #ff8 0%, #ff0 50%, #aa0 100%);
 background: -o-linear-gradient(top, #ff8 0%, #ff0 50%, #aa0 100%);
 background: -ms-linear-gradient(top, #ff8 0%, #ff0 50%, #aa0 100%);
}
div.rating.r4 td{
 background: -webkit-linear-gradient(top, #fda 0%, #f90 50%, #b70 100%);
 background: -moz-linear-gradient(top, #fda 0%, #f90 50%, #b70 100%);
 background: -o-linear-gradient(top, #fda 0%, #f90 50%, #b70 100%);
 background: -ms-linear-gradient(top, #fda 0%, #f90 50%, #b70 100%);
}
div.rating.r5 td{
 background: -webkit-linear-gradient(top, #f88 0%, #f00 50%, #b00 100%);
 background: -moz-linear-gradient(top, #f88 0%, #f00 50%, #b00 100%);
 background: -o-linear-gradient(top, #f88 0%, #f00 50%, #b00 100%);
 background: -ms-linear-gradient(top, #f88 0%, #f00 50%, #b00 100%);
}
div.rating {
 vertical-align:bottom;
 display:inline-block;
 white-space:nowrap;
 font-family:Tahoma, Verdana, Arial;
}
div.rating table{
 width:6em;
 height:1.2em;
 padding:0;
 margin:0 .3em .3em 0;
 border-collapse:separate;
 border-spacing:0;
 table-layout:fixed;
 font-weight:normal;
}
div.rating td {
 border:1px solid;
 border-style:solid;
 border-left-style:none;
 padding:0;
 box-shadow: 0 .14em .2em #999, .2em .2em .2em #999;
}
div.rating.r1 td{
 background-color:#0cf;
 border-color:#06f;
 background: linear-gradient(top, #8df 0%, #0cf 50%, #06f 100%);
}
div.rating.r2 td{
 background-color:#0f0;
 border-color:#080;
 background: linear-gradient(top, #8f8 0%, #0f0 50%, #090 100%);
}
div.rating.r3 td{
 background-color:#ff0;
 border-color:#990;
 background: linear-gradient(top, #ff8 0%, #ff0 50%, #aa0 100%);
}
div.rating.r4 td{
 background-color:#f90;
 border-color:#850;
 background: linear-gradient(top, #fda 0%, #f90 50%, #b70 100%);
}
div.rating.r5 td{
 background-color:#f00;
 border-color:#800;
 background: linear-gradient(top, #f88 0%, #f00 50%, #b00 100%);
}
div.rating.r1 td:nth-child(3),
div.rating.r1 td:nth-child(4),
div.rating.r1 td:nth-child(5),
div.rating.r1 td:nth-child(6),
div.rating.r2 td:nth-child(4),
div.rating.r2 td:nth-child(5),
div.rating.r2 td:nth-child(6),
div.rating.r3 td:nth-child(5),
div.rating.r3 td:nth-child(6),
div.rating.r4 td:nth-child(6) {
 background-image:none;
 background-color:#eee;
 background: -webkit-linear-gradient(top, #fff 0%, #ddd 50%, #aaa 100%);
 background: -moz-linear-gradient(top, #fff 0%, #ddd 50%, #aaa 100%);
 background: -o-linear-gradient(top, #fff 0%, #ddd 50%, #aaa 100%);
 background: -ms-linear-gradient(top, #fff 0%, #ddd 50%, #aaa 100%);
 background: linear-gradient(top, #fff 0%, #ddd 50%, #aaa 100%);
}
/*①②③④⑤*/
div.rating td:first-child{
 font-size:.9em;
 border-top-left-radius:.6em;
 border-bottom-left-radius:.6em;
 text-align:center;
 width:1em;
 border-width:1px;
 border-style:solid;
 background-color:#eee;
 background-image:none;
 box-shadow:.2em .2em .2em #999;
}
div.rating.r1 td:first-child:before{content:"1";}
div.rating.r2 td:first-child:before{content:"2";}
div.rating.r3 td:first-child:before{content:"3";}
div.rating.r4 td:first-child:before{content:"4";}
div.rating.r5 td:first-child:before{content:"5";}