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.