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">★</a>
<a href="#" data-value="2" title="Votar con 2 estrellas">★</a>
<a href="#" data-value="3" title="Votar con 3 estrellas">★</a>
<a href="#" data-value="4" title="Votar con 4 estrellas">★</a>
<a href="#" data-value="5" title="Votar con 5 estrellas">★</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.
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
Me alegra que te guste Magoplup :)
Esta muy bueno amigo, pero no cuenta el numero de votos :? y cada vez que alguien califica se va a la parte suerior de blog.
Claro que los contará, pero este es sólo el CSS+HTML, para que sea funcional tenemos que poner PHP y Javascript de nuestra parte, pero necesito tiempo para completar el tutorial ;)
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.
Buenas amigo, estas estrellas sirven para los resultados de google? osea cuando salga mi web aparezcan las estrellas? y funciona en blogger?
Sí valdrán para google, pero cuando las tengamos completas. En blogger no puede ser porque para guardar los datos hace falta PHP. La idea es acabar haciendo un plugin de wordpress.
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?
Sí, pero entonces no valdrían de nada para google (si están cargados dinámicamente no lo puede leer).
Ohhh no lo sabía es una lástima :(. Últimamente me estoy pensando pasarme a wordpress, estoy viendo que todo en blogger es muy limitado :(
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
Esto lo continué un par de días después presentando un plugin para wp basado en esta entrada:
http://emiliocobos.net/ec-stars-rating-wordpress-plugin/
Si tienes alguna duda sobre su funcionamiento, por favor házmelo saber, pero tampoco son necesarias esas formas.