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

About Author


Please enter your comment!
Please enter your name here

Share post:




More like this

Building A Free Platform For Impactful Documentaries (Part 2) — Smashing Magazine

In this second article of a two-part series,...

Exciting New Tools for Designers, October 2023

Today Welcome to our all treats-no tricks, October tools...

UIBundle: A One-Stop Shop for Design Resources, Freebies, & Tips

Every designer has a favorite website where...

Collective #784

State of HTML 2023 * Nue * The...