Some ⭐️⭐️⭐️⭐️⭐️ star ranking techniques aren’t all the time precisely even stars. Say you need to assist ranking one thing 2.25 stars. To do this you may “fill” the form of the celebs partially. I like this concept by Samuel Kraft. The tough half is:
The ultimate step is making the overlay div solely have an effect on the star SVGs beneath, not the background. We are able to do that through the use of the CSS mix-blend-mode property with the colour worth.
Try Samuel’s publish for an interactive demo and deeper info, however I assumed I’d give it a crack myself to get a really feel for the concept:
The concept is that that is an overlay on high of the celebs. You may’t see it and it doesn’t have an effect on the celebs as a result of it’s both black or white and mix-blend-mode: colour; signifies that overlay will solely impact components that do have colour.
There are a great deal of methods to do ranking stars, for the document. We coated 5 of them a short while again. One reasonably intelligent methodology in there’s utilizing unicode stars (like, as textual content), then filling their background with -webkit-background-clip: textual content; which implies you’ll be able to partially fill them (like with a hard-stop linear-gradient()). Stable trickery, that.
To Shared Hyperlink — Permalink on CSS-Tips
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!