Einige ⭐️⭐️⭐️⭐️⭐️ Bewertungssysteme sind nicht immer exakt gleichmäßige Sterne. Sagen wir, Sie möchten etwas mit 2,25 Sternen bewerten. Dazu könnten Sie die Form der Sterne teilweise „füllen“. Ich mag diese Idee von Samuel Kraft. Der knifflige Teil ist
Der letzte Schritt ist, die Overlay-Div nur auf die darunter liegenden Stern-SVGs wirken zu lassen, nicht auf den Hintergrund. Das können wir erreichen, indem wir die CSS-Eigenschaft
mix-blend-modemit dem Wertcolorverwenden.
Schauen Sie sich Samuels Beitrag für eine interaktive Demo und tiefere Informationen an, aber ich dachte, ich probiere es selbst aus, um ein Gefühl für die Idee zu bekommen
Die Idee ist, dass dies ein Overlay über den Sternen ist. Man kann es nicht sehen und es beeinflusst die Sterne nicht, da es entweder schwarz oder weiß ist und mix-blend-mode: color; bedeutet, dass das Overlay nur Elemente beeinflusst, die Farbe haben.
Es gibt viele Möglichkeiten, Bewertungssterne zu erstellen, nur zur Information. Wir haben vor einiger Zeit fünf davon behandelt. Eine ziemlich clevere Methode dabei ist die Verwendung von Unicode-Sternen (also als Text), deren Hintergrund dann mit -webkit-background-clip: text; gefüllt wird, was bedeutet, dass man sie teilweise füllen kann (wie mit einem harte Abstopp- linear-gradient()). Solides Tricksen, das.
Ich habe Ihren Ansatz für die Bewertungssterne geliebt.
Ich benötigte nur eine Anpassung: Wenn Sie auf den Stern klicken müssen (cursor: pointer), da die Abdeckung darüber liegt, ist der abgedeckte Teil nicht klickbar.
Um dies zu beheben, setzen Sie einfach einen z-index: -1 auf die Abdeckung und verschieben Sie den mix-blend-mode von der Abdeckung auf das SVG mit dem Wert „luminosity“. Das Ergebnis ist dasselbe, aber jetzt hat der gesamte Stern den richtigen Cursor.