Connect with us

Link

Fractional SVG stars with CSS

Published

on

Fractional SVG stars with CSS


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-mode property with the color value.

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.


Direct Link →



Source link

Continue Reading
Click to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.