Algunos sistemas de clasificación de estrellas ⭐️⭐️⭐️⭐️⭐️ no siempre son exactamente estrellas uniformes. Supongamos que desea respaldar una calificación de 2,25 estrellas. Para hacer eso, podrías “rellenar” parcialmente la forma de las estrellas. Me gusta esta idea de Samuel Kraft. La parte complicada es:
El paso final es hacer que la superposición div solo afecte a los SVG de estrellas debajo, no al fondo. Podemos hacer esto usando CSS mix-blend-mode
propiedad con el color
valor.
Echa un vistazo a la publicación de Samuel para ver una demostración interactiva e información más profunda, pero pensé en intentarlo yo mismo para tener una idea de la idea:
La idea es que se trata de una superposición sobre las estrellas. No puedes verlo y no afecta a las estrellas porque tampoco es black
o white
y mix-blend-mode: color;
significa que la superposición solo afectará a los elementos que tengan color.
Hay muchas formas de calificar con estrellas, para que conste. Cubrimos cinco de ellos hace un tiempo. Un método bastante inteligente es usar estrellas Unicode (como, como texto), luego llenar su fondo con -webkit-background-clip: text;
lo que significa que puede llenarlos parcialmente (como con un tope linear-gradient()
). Truco sólido, eso.
Enlace directo →