Star-Rating sólo con CSS

17/jun/2015 7

Cualquier sistema de votación (star-rating system) requiere de los 3 componentes básicos de todo sitio web: HTML, CSS y JavaScript. Pero a medida que la tecnología avanza, es posible dejar la ayuda que JavaScript brindó por mucho tiempo mientras CSS no entraba de lleno a la capa de interacción, principalmente a través de CSS3. Pero existen propiedades CSS2 que siempre han permitido cierto grado de complejidad pero que por culpa de IE6 y su hermano mutante y deforme IE7 no eran posible utilizarlos. Con soporte IE8+ ya podemos utilizar tranquilamente -por ejemplo- selectores avanzados de atributos y descendientes, los que precisamente son los protagonistas de este artículo.

star-rating

Me propuse a hacer un star-rating con HTML y CSS, dejando a JavaScript la tarea de conectar el dato con el servidor, si fuese el caso. Terminé con 2 opciones diferentes, y al ponerme a investigar descubrí que ya existía por lo menos una de las soluciones a las que llegué. Para no perder el trabajo, de todas maneras las expongo aquí por si a alguien más les son útiles.

Para ambos ejemplos el marcado HTML es el mismo:

<div class="star-rating">
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
    <a href="#">&#9733;</a>
</div>

Técnica 1

Consiste en al hacer :hover a todo el contenedor .star-rating y al elemento (estrella), se cambia el color de todos al color de estrella seleccionado (amarillo), salvo a los selectores hermanos del elemento que vuelven a tener el color normal:

.star-rating a {
  display: inline-block;
  color: #95a5a6; /* gris (normal) */
}
.star-rating:hover a {
  color: #f39c12; /* amarillo (seleccionado) */
}
  .star-rating:hover a:hover ~ a {
    color: #95a5a6; /* gris (normal) */
  }

JS Bin on jsbin.com

Técnica 2

Como en CSS los hermanos adyacentes sólo alcanzan los que están hacia adelante en el árbol que el propio, no podemos dar estilos a los anteriores al :hover, el cual es el propósito de todo star-rating. Entonces, por qué no darlos vuelta? Flotamos los elementos (estrellas) hacia la derecha (float: right;) logrando invertirlos y obtenemos el resultado que necesitamos:

.star-rating a {
  float: right;
  color: #95a5a6; /* gris (normal) */
}
  .star-rating a:hover {
    color: #f39c12; /* amarillo (seleccionado) */
  }
  .star-rating a:hover ~ a {
    color: #f39c12; /* amarillo (seleccionado) */
  }

JS Bin

Comentarios

  1. Ivan Castillo [#]

    Esta padrisimo el efecto de las lineas al inicio de los artículos, busque de entre tus artículos y no encontré información sobre tal, en el código html de la pagina parece ser que menciona algo de Canvas, podrías compartir como lo hiciste? 😀

    PD: Parece ser que tu sistema de comentarios no funciona correctamente en Firefox (O talvez solo fue mi idea).

  2. Abraham [#]

    Hola mi estimado,
    buen día

    Una pregunta me encanto como tienes el backgroun del inicio de todas tus páginas,

    como hiciste el efecto de los punto y las líneas, espero me puedas apoyar.

    Saludos cordiales

  3. Pablo Fernandez [#]

    Hola Jorge, muy buen blog!
    Te cuento que hace un tiempo estoy buscando la forma de calificar posts a través de estrellas y me topé con tu blog. Si bien entiendo superficialmente lo que comentaste en el post http://www.csslab.cl/2015/06/17/star-rating-solo-con-css/ sigo sin comprender como agregarlo a mi sitio web que estoy armando (no es WP). No se mucho de programación y estoy haciendo lo que puedo, y por eso quería preguntarte si me podías ayudar. Entiendo que el código html lo agrego a mi página respectiva pero el css no se cómo hacerlo. ¿tengo que crear un archivo nuevo css o debo agregar el código al archivo style? Gracias por tu respuesta!

    Pablo

    • Jorge Epuñan [#]

      Pablo: este artículo sólo se muestra la parte gráfica del star rating para incluirlo en un sitio wen necesitas algo dinámico, que guarde en BD de acuerdo al contenido que estás dando puntos. Hay diferentes maneras de hacerlo, diferentes lenguajes, y bases de datos. Te recomiendo buscar en google por dynamic sating system para ver alguna solución que se adapte a tu proyecto.

      Éxito.

  4. Javier Cruz [#]

    Hola Jorge,

    Buen dato me parecio super facil de implementar pero mi duda es la siguiente sirve igual como rating snippet para Google.. ?
    Lo reconoce igual y la sumatoria de la misma eso debe ser por .js ?

    Quedo atento a su respuesta Saludos!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab