pon css en tu vida!

Tener un sistema visual de valoración en nuestra web puede darle el toque diferente a nuestro proyecto.

Durante la maquetación de mi portfolio, me propuse utilizar este método de valoración para representar mi participación en los proyectos que he participado.

La idea.

El sistema es el típico método de valoraciones que todos conocemos (las tan conocidas estrellitas). Dándole “media” vuelta al diseño, cambiando las estrellas por asteríscos, podemos obtener algo así:

– VER EJEMPLO FUNCIONANDO -

Ejecución

A la hora de convertir el diseño en código HTML semántico, lo más adecuado es utilizar la etiqueta <dl>, para definir una lista compuesta por términos (<dt>) y descripciones (<dd>).  Veamos el HTML necesario para crear esta lista:

<dl>
<dt>xhtml</dt>
<dd class="star stars5" title="Total">Total</dd>

<dt>css</dt>
<dd class="star stars4" title="Muy significativa">Muy significativa</dd>

<dt>zendFramework</dt>
<dd class="star stars3" title="Significativa">Significativa</dd>

<dt>jQuery</dt>
<dd class="star stars2" title="Parcial">Parcial</dd>

<dt>diseño</dt>
<dd class="star stars1" title="Puntual">Puntual</dd>
</dl>

Observamos el código html antes de empezar con los estilos para comprobar que es perfectamente legible y comprensible sin la necesidad de CSS.

A la hora de crear las imágenes, vamos a utilizar sprites. Es decir, juntaremos todas las imágenes necesarias en una sola, que posicionaremos mediante CSS para obtener el resultado deseado. En el caso del diseño original, las imágenes de las “estrellas” debían tener el fondo transparente, sin embargo la versión que os muestro para que se aprecie mejor tiene color de fondo:

Utilizar sprites para nuestras imágenes tiene como resultado más significativo la reducción de peticiones al servidor. Suponiendo que creando las cinco imágenes por separado el peso será el mismo que creando tan solo una, la mejora la encontramos en que reducimos de 5 a 1 las veces que el servidor debe entregar archivos al navegador para obtener el mismo resultado.

Mejor con estilos…

Es el momento de darle vida a nuestro HTML, para ello hemos dotado a los elementos de difinición (<dd>) de la lista con dos clases: star y stars5.

Con la primera clase (star) proporcionaremos los estilos comunes a todos los elementos: ancho, alto, imagen de fondo, etc… La segunda clase será diferente dependiendo de la valoración que queramos asignar. En este caso hay cinco posibles opciones: stars5, stars4, stars3, stars2 y stars1. En función a esta clase, posicionaremos la imagen para obtener el resultado deseado. Por lo tanto, el CSS quedaría tal que así…

.star {
width: 74px;
height: 10px;
text-indent: -9999px;
background: transparent url(bg_interface.png) 0 0 no-repeat;
margin: 0 0 16px 13px;
}
.stars5 {
background-position: -1px 0;
}
.stars4 {
background-position: -1px -11px;
}
.stars3 {
background-position: -1px -22px;
}
.stars2 {
background-position: -1px -33px;
}
.stars1 {
background-position: -1px -44px;
}

Más sencillo imposible; asignamos al elemento un tamaño fijo, movemos el texto mediante text-indent para que sea invisible al usuario, y asignamos la imagen de fondo.

Después, tan solo necesitamos posicionar la imagen de fondo para que se muestre la sección correspondiente. Es importante el uso del atributo title, para que el usuario conozca el significado de nuestra puntuación al pasar el cursor por encima de los asteriscos.

- VER DEMO -