Some ⭐️⭐️⭐️⭐️⭐️ star rating systems aren’t always exactly even stars. Say you want to support rating something 2.25 stars. To do that you could “fill” the shape of the stars partially. I like this idea by Samuel Kraft. The tricky part is:
The final step is making the overlay div only affect the star SVGs beneath, not the background. We can do this by using the CSS
mix-blend-modeproperty with thecolorvalue.
Check out Samuel’s post for an interactive demo and deeper information, but I thought I’d give it a crack myself to get a feel for the idea:
The idea is that this is an overlay on top of the stars. You can’t see it and it doesn’t affect the stars because it’s either black or white and mix-blend-mode: color; means that overlay will only effect elements that do have color.
There are loads of ways to do rating stars, for the record. We covered five of them a little while back. One rather clever method in there is using unicode stars (like, as text), then filling their background with -webkit-background-clip: text; which means you can partially fill them (like with a hard-stop linear-gradient()). Solid trickery, that.
I loved your approach for the rating stars .
I needed only one adjustment: If you need to click on the star (cursor: pointer), as the cover is on top of it, the covered part is not clickable.
To fix this, just put a z-index: -1 on the cover and move the mix-blend-mode from the cover to the svg with value “luminosity”. The result is the same, but now all the star has the correct cursor.