Hay un tutorial que por petición me gustaría hacer, pero que últimamente no estoy encontrando tiempo para ello. Se trata de hacer una pequeña clasificación con estrellas, lo típico que veis en miles de web, pero bien hechas. No usaremos imágenes: sólo texto y CSS para el efecto.

También hace falta algo de Javascript para llevar a cabo el envío de los datos, y PHP para recibirlos, pero eso lo voy a dejar para un poco más adelante.

Así que empezaremos por un poquito de HTML básico: un contenedor con 5 links (uno por estrella), con el carácter unicode de la estrella (★). Además, añadiremos un noscript para que los usuarios que no tengan Javascipt:

<div class="ec-stars-wrapper">
	<a href="#" data-value="1" title="Votar con 1 estrellas">&#9733;</a>
	<a href="#" data-value="2" title="Votar con 2 estrellas">&#9733;</a>
	<a href="#" data-value="3" title="Votar con 3 estrellas">&#9733;</a>
	<a href="#" data-value="4" title="Votar con 4 estrellas">&#9733;</a>
	<a href="#" data-value="5" title="Votar con 5 estrellas">&#9733;</a>
</div>
<noscript>Necesitas tener habilitado javascript para poder votar</noscript>

Actualmente quedaría algo así:

El CSS

Ahora viene la parte truculenta, el CSS, que hará el efecto :hover. Brevemente: Símplemente cuando tengan el ratón encima del padre, pondremos las estrellas como activas. Luego utilizamos el selector ~ para seleccionar las de la derecha, y quitárselo.

.ec-stars-wrapper {
	/* Espacio entre los inline-block (los hijos, los `a`) 
	   http://ksesocss.blogspot.com/2012/03/display-inline-block-y-sus-empeno-en.html */
	font-size: 0;
	/* Podríamos quitarlo, 
		pero de esta manera (siempre que no le demos padding), 
		sólo aplicará la regla .ec-stars-wrapper:hover a cuando
		también se esté haciendo hover a alguna estrella */
	display: inline-block;
}
.ec-stars-wrapper a {
	text-decoration: none;
	display: inline-block;
	/* Volver a dar tamaño al texto */
	font-size: 32px;
	font-size: 2rem;
	
	color: #888;
}

.ec-stars-wrapper:hover a {
	color: rgb(39, 130, 228);
}
/*
 * El selector de hijo, es necesario para aumentar la especifidad
 */
.ec-stars-wrapper > a:hover ~ a {
	color: #888;
}

Ahora tendríamos algo como ésto:

Ir más allá

El efecto ahora mismo no es precisamente alucinante, pero puedes hacer ciertas cosas para mejorarlo:

  • Usa text-shadow: Las estrellas son textos, así que puedes jugar con esta propiedad tanto como quieras para crear efectos mejores (ver ejemplo).
  • Gradientes (sólo webkit): Usando -webkit-background-clip: text;, junto con -webkit-text-fill-color: transparent;, podrás aplicar un gradiente a las estrellas (Ver ejemplo)
  • Fuentes con iconos: Así podrás usar la estrella que más te parezca, y además los que tengan navegadores que no soporten ese carácter, verán la estrella en todo su esplendor, y no ese cuadrado molesto de unicode.

27 pensamientos en “Calificación con estrellas sólo con CSS

  1. Bitacoras.com
  2. Imagen de MagoplupMagoplup el dijo:

    Perfecto Emilio este es uno de los más sencillos que he visto y con la facilidad de poder personalizarlo a gusto de cada usuario valla que esta interesante

  3. Imagen de MiguelMiguel el dijo:

    Apreciado Emilio: Quiero agradecerle nuevamente por disponer parte de su tiempo para ofrecerme su apoyo, que estimo de gran valor. Igualmente, quiero darte las Mil GRACIAS por el tutorial que me proporcionó, me ha sido de gran utilidad. Estoy seguro de que también ha sido de interés a muchos lectores de la bitácora. Espero que siga manteniendo la lámpara encendida por mucho tiempo y nos sigas iluminando.

    Un Abrazo, amigo.

  4. Imagen de PedroPedro el dijo:

    Y de alguna manera no es posible, colocar algo como un script en dropbox y alojar el php ahí e insertarlo en blogger como un archivo css, o un js?

  5. Calificación con estrellas para WordPress: EC-Stars-Rating | Emilio Cobos-CMC
  6. Imagen de juanjuan el dijo:

    Hola saludos y donde esta la segunda parte? es mejor que hagas las cosas bien o de lo contrario no hagas nada, internet es a si RÁPIDO Y CONFIABLE

  7. Imagen de @aerview el dijo:

    Gracias por el tutorial muy practico y sencillo, hay que terminarlo para que los puntajes se guarden como comentas en uno de los comentarios. Mi pregunta es si tienes algun tutorial para poner esas adorables manitas Arriba tipo las que se utilizan en youtube, te lo agradeceria mucho gracias!.

  8. Imagen de manuelmanuel el dijo:

    Hola Emilio: Ya me ayudastes una vez con una cosa de author y me fue muy bien tu ayuda. Ahora queria preguntarte en relacion con este post, si son las estrellas que salen en la busqueda de google? porque si es así, he mirado en algunos enlaces que te han dejado y al buscar la url por google, o bien no sale o la url ha desparecido. No está penalizado por Google?, y de no estarlo, como lo implemeto en Bloguer:

    Saludos,
    Manuel

    • Imagen de Emilio Cobos Álvarez el dijo:

      No, esto es sólo CSS, las que salen en google necesitan un marcado especial. No están penalizadas, pero google no las muestra si no las considera relevantes.

      Por desgracia en blogger no se puede implementar, ya que no puedes acceder a una base de datos.

      • Imagen de manuelmanuel el dijo:

        Emilio:
        En un privado te podria enviar un codigo que sí funciona en bloguer. Lo he comprobado en “elementos estructurados” y sale bien. Todavia no lo he visto reflejado en busqueda de Google porque lo puse ayer, y en uno de mis blogs, es un schema. pero no se si por esto me pueden penalizar, me gustaria saber tu opinión. Si te parece envíame un correo y lo comentamos.
        Saludos,
        Manuel

  9. Imagen de manuelmanuel el dijo:

    Continuación. El caso es, Emilio, hacer que G. te lo indexara con normalidad y que pasara desapercibido, como un texto html más. Es difícil seguir hablando así.

  10. Imagen de CharldarwinCharldarwin el dijo:

    Hola Emilio, excelente tuto te quedo genial. Pero me gustaría saber si me pudieses ayudar con el código en bruto. En realidad valoro mucho tu plugin http://emiliocobos.net/ec-stars-rating-wordpress-plugin/, pero te agradecería mas (creo que no solo yo te lo agradecería sino todos los que te siguen y/o seguimos) si pudieses mostrar el código para enviar los datos o de que manera enviar los datos de ese campo. En mi caso es porque deseo integrarlo al formulario de registro de wordpress para valorar gustos ya sean musicales, de lectura, etc. de los que se registren, como por ejemplo que le pongan 3 estrellas a rock, 2 estrellas a pop, 3 estrellas a baladas, etc.
    Desde ya gracias.

  11. Imagen de César el dijo:

    Hola amigo, me gustaría saber si en la parte de (evidentemente de el código HTML), debo sustituir todos los “#” por el link de la página que desea que sea votada o simplemente dejarlo igual? También me gustaría saber como hacer la función como la que tienes, me refiero a que una vez votando te aparezca el mensaje de cuantos votos van, si ya habías votado anteriormente, etc. MUCHAS GRACIAS :D

  12. Imagen de daviddavid el dijo:

    hola, ante todo decirte que es el mejor script de votación por estrellas que he visto por su sencillez. Quería preguntarte como obtengo el valor de data-value en javascript ya que estoy pegao en javascript y no atino. Muchas gracias.

  13. Imagen de KeicerKeicer el dijo:

    Buenos dias amigo, me gusto mucho tu post pero quisiera saber como hacer para que las estrellas al momento de darle click se quedaran coloreadas si me pudieras ayudar con eso te lo agradecería. Muchas Gracias.

Add Comment Register



Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.