I had this idea, that I could use the CSS gradient background to display the ratings of a restaurant. The results might be more interesting, than useful, but it certainly has some pros as well. At the end, it may look something like this:

Hearts and stars filled with gradient

In this example the rating can be set from 0 to 5 with 1/100 increments (or smaller I guess, if that makes sense). Looks the best though if I don’t go beyond 0.5 increments as otherwise it’s not really a pixel perfect solution.



Tagged with