Post by FCorp on Jun 6, 2014 2:48:33 GMT
Script :
Implementation :
Preview :
.star1, .star2, .star3, .star4, .star5 { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABQCAMAAACj8+IRAAAA1VBMVEUAAAD/4FXPz8//8JytegDj4+POmwD/1SugoKDJycn/0Rr/2j+pqanDw8OsrKzruAjUu3+/v7/kyn/r0n/b1cPu4L+oqKe0tLW3t7fj3Mbz7d+1ggC5hgC9igHBjgHGkwDKlwDSnwDDnEDWowDYpQDdqgDaqQ7ruhLZv3/txS//ywHuyUDnyFj/zgrvzlDqz2nx1GHu1W7q3b/w4r6fn5+jo6OkpKSmpqatra6xsbC7u7vCva+9vsDFxcXS0tLg2cbl3sjw697y7N7/5mv96ILW1tbb29sLMWt8AAAAAXRSTlMAQObYZgAAAkNJREFUeNqt1Odug0AQRtGFhQScBAe3YKc6zU7vvdf3f6QA3lg2O1Ims9/8wKurESAjHaVGs7OjqnN7C0rNs7NmZeX1+fkVk7a13q7sJGGYQFLzROuT6Vfv+mHodxGpr7X2+tXnh37imBoz+Rxqz/MOi1OjePZ8PnHo+35cnLrytKGL8cx8buQ7nbAY38x3R54a66feeE7Xizd/6fgT03lxSBdrxx/m3sdrF+Vf1buJv8xGfNNzSu3Vg9G9D1bb5qP0rp9GK0/XPce0sjdXzt7K+JNfpXE56ZVjai/Pmln+ffP3aMFM9O6Whru1Wm0wyC+7Q7PTuntM0yzLL3cttxTUj+rB5mb5Y3aipful6OGh/HFLwf5WcK7UebC1P755lkRvSr1FSRa5pcVgUU0fVOuyVTnIE+05jHjCcxzxhOcw4gnPccQTnkOIJzzHEU94jiOe8BxIPOE5kHjCcyDxhOcw4gnPccQTnpPEp+ljluWXCbz/ToTnOOIJz3HEE54jiWd7LiOe57mQeJ7nMuJ5nguJ53n+f+J5nguJ53kuJJ7nuZR4nudS4nmeS4nneS4jnue5kHie50LieZ4Lied5LiSe57mYeBfPGcSLPecQL/acQbzYcw7xYs//IF7sOYd4secc4sWes4gXe84iXuw5i3ix5wzixZ5ziBd7ziFe7DmHeLHnHOLFnvOIB3teTUjPrYT0vJqQnlsJ6flkQnpuJaTnVkJ6biek53ZCem4npOfVhPTcSkjPrYT03EpIz62E9Hw6/QB9niCPpTmraAAAAABJRU5ErkJggg==); background-color: transparent; background-repeat: no-repeat; }
.star1 { width: 92px; height: 16px; background-position: -0px -0px;}
.star2 { width: 92px; height: 16px; background-position: -0px -16px;}
.star3 { width: 92px; height: 16px; background-position: -0px -32px;}
.star4 { width: 92px; height: 16px; background-position: -0px -48px;}
.star5 { width: 92px; height: 16px; background-position: -0px -64px;}
Implementation :
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
Preview :