Aquí hay un artículo mucho más nuevo: Cinco métodos para calificaciones de cinco estrellas, aunque no cubre esta técnica exacta, ¡que sigue siendo un truco de CSS legítimo!
Las calificaciones de estrellas son uno de esos patrones clásicos de UX con los que todos han jugado en un momento u otro. Tuve la idea de hacer la parte de UX con muy poco código y sin JavaScript.
El marcado usa la entidad Unicode para una estrella (☆) directamente en él. Si tiene un juego de caracteres UTF-8, no debería ser gran cosa. Alternativamente, puede utilizar & # 9734; (Calculadora para ese tipo de cosas). Puedes usar tantas estrellas como quieras:
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>Ahora tenemos que sacar esa estrella “hueca” con una estrella “sólida” al pasar el mouse (Galería para encontrar ese tipo de personajes). Fácil, simplemente deja caer un pseudo elemento de una estrella sólida (★) sobre él :hover
.rating > span:hover:before {
content: "2605";
position: absolute;
}Solo en virtud de estar absolutamente posicionado, el top: 0; left: 0; están implícitos (en los navegadores modernos, de todos modos). Entonces, la estrella sólida simplemente se sienta directamente encima de la estrella hueca. Incluso puede cambiar el color o el tamaño si lo desea.
Pero lo que tenemos hasta ahora solo funciona en estrellas individuales. El patrón UX exige que se llenen todas las estrellas. Por ejemplo, si pasamos el cursor sobre la 4ª estrella, la 4ª estrella se vuelve sólida, pero también la 1ª, 2ª y 3ª.
A través de CSS, no hay forma de seleccionar un elemento secundario anterior. Sin embargo, hay una manera de seleccionar elementos secundarios sucesivos, a través de combinadores hermanos adyacentes o generales. Si invertimos literalmente el orden de los caracteres, entonces podemos hacer uso del combinador de hermanos general para seleccionar todas las estrellas que aparecen visualmente antes de la estrella flotante, pero después de la estrella flotante en el HTML.
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}¡Eso es! Todo el patrón de UX de calificaciones de estrellas con muy poco código. Aquí está toda la parte de CSS para que funcione:
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}Ver demostración
Y aquí hay un Dabblet si quieres jugar con él.
Uso actual
Lo más probable es que JavaScript esté involucrado con las estrellas de calificación de todos modos. Cuando un usuario hace clic en una estrella, la calificación se informa a través de Ajax y el widget gana una clase para mostrar permanentemente la cantidad de estrellas seleccionada. Con JavaScript ya involucrado, ¿no estaría bien apoyarse en él para las clases de flip-flop alrededor de las estrellas para que funcionen? Si su aplicación depende absolutamente de JavaScript para funcionar, entonces claro, está bien. Si está interesado en crear un sitio web que aún funcione sin JavaScript, entonces estas calificaciones por estrellas necesitarán más trabajo. Debería mirar el ejemplo de Lea Verou que usa botones de radio, que podrían ser parte de un formulario que se puede enviar para “calificar” lo que sea sin JavaScript.
Otros
Después de compartir esto por primera vez en Twitter, un par de personas lo intentaron de maneras ligeramente diferentes. @dmfilipenkoDabblet. @ mprogano’s Incursionar