Sistema de votación basado en estrellas con CSS3

Hace un tiempo, si queríamos implementar un sistema de votación basado en estrellas, teníamos que recurrir a la santísima trinidad del diseño web: HTML, Javascript y CSS. Conforme avanza la tecnología, es posible eliminar a uno de los componentes de la variable, en este caso Javascript. Con el lanzamiento de CSS3 es posible cumplir con ciertas funciones de las que se ocupaba Javascript de una manera sencilla y bastante simple. CSS3 cambió la manera de desarrollar el diseño web introduciendo nuevos componentes rompedores que facilitaban la tarea a diseñadores y sobre todo a desarrolladores front-end, quien ahora se veían desarrollando efectos y animaciones en otro lenguaje totalmente distinto.

Son muchos los ejemplos en los que CSS3 ha abarcado las funciones que antaño ejercía Javascript. Uno de ellos, y el que te vamos a mostrar hoy, es el sistema de votación basado en estrellas. Seguramente habréis visto en más de una ocasión cinco estrellas debajo de un artículo o de un producto de una tienda online. Al pasar por encima con nuestro cursor vemos como esas estrellas se van completando con un color distinto mediante una animación muy agradable. Al hacer clic, enviamos al sistema en cuánto sobre cinco valoramos el contenido. Es lo que se llama un sistema de votación con estrellas o basado en estrellas.

En este artículo, únicamente te vamos a enseñar cómo mostrar estas cinco estrellas para que al pasar el cursor por encima con el ratón, se completen de un color totalmente distinto. Por desgracia, el que se guarde la votación en el sistema ya depende del lenguaje de programación y eso no lo vamos a tocar en este artículo. Todo esto lo vamos a implementar con CSS3 y algo de HTML. ¿Te apetece la idea? ¡Pues empezamos!

Hemos visto dos posibilidades para desarrollar esta idea. Os explicamos la primera técnica:

Primera técnica

Como os hemos dicho antes, estas técnicas son dejando de lado Javascript. Primero, antes que nada, tendríamos que definir las estrellas en un documento HTML.

<div class="star-rating">
    <a href="#">a>
    <a href="#">a>
    <a href="#">a>
    <a href="#">a>
    <a href="#">a>
div>

El CSS consiste en que al hacer hover sobre el contenedor que hemos definido como star-rating y también sobre la estrella en sí, se cambiará el color de todos los elementos al color de la estrella que hayamos seleccionado, salvo el de los hermanos adyacentes del elemento que volverán a su color inicial.

.star-rating {
  $size: 20px;
  $normal: #95A5A6;
  $selected: #F39C12;
  
  display: inline-block;
  
  a {
    display: inline-block;
    width: $size;
    height: $size;
    line-height: $size;
    font-size: $size;
    color: $normal;
    text-decoration: none;
    text-align: center;
    transition: color .3s;
  }
  &:hover a {
    color: $selected;
    
    &:hover ~ a {
      color: $normal;
    }
  }
  
}

Segunda Técnica

En CSS el nivel de hermanos adyacentes solamente alcanza a los que están más hacia delante en el árbol que en el propio mismo. Es por eso que no podemos dar estilo a los elementos anteriores al :hover, que es lo que queremos conseguir con el star_rating. Una solución sencilla a todo este embrollo es darles completamente la vuelta. Hacemos float hacia la derecha para invertirlos y obtener el resultado que estábamos buscando.

Resumiendo, el HTML sería este:

<div class="star-rating">
    <a href="#">a>
    <a href="#">a>
    <a href="#">a>
    <a href="#">a>
    <a href="#">a>
div>

Y el CSS quedaría así:

.star-rating {
  $size: 20px;
  $normal: #95A5A6;
  $selected: #F39C12;
  
  display: inline-block;
  
  a {
    float: right;
    width: $size;
    height: $size;
    line-height: $size;
    font-size: $size;
    color: $normal;
    text-decoration: none;
    text-align: center;
    transition: color .3s;
    
    &:hover {
      color: $selected;
      
      & ~ a {
        color: $selected;
      }
    }
  }

}

Con esto quedaría completo el snippet para implementar un sistema de votación basado en estrellas. Estamos seguros que hay millones y millones de formas de hacerlo, pero esta sinceramente nos ha gustado mucho por lo elegante que es. Ya sabéis que con CSS3 es posible ahorrarse algunas funciones de Javascript y en programacion.net estaríamos encantados de que nos dijeses o nos enviases a través del menú Enviar Tutorial algún tutorial en el que has podido sustituir Javascript con CSS3. No dudes que si lo vemos original, simple y bien desarrollado se publicará en la web bajo tu perfil de usuario.

Con todo esto nos surge una pregunta, ¿qué lenguaje de programación crees tú que se quedará próximamente obsoleto? Ojo, con esto no estamos diciendo que Javascript se quede obsoleto, NI MUCHÍSIMO MENOS, solo que con el tema del solapamiento me ha dado por pensar. ¿Tenéis claro cuál va a ser el próximo? Pues escríbenoslo en los comentarios...

Fuente: csslab

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP