Star-rater con i CSS

Quella dello star-rater con i CSS è una tecnica molto interessante che ho segnalato un po' di tempo fa sul blog. Nel post ho scritto in merito: il CSS è semplice, anche se un po' lunghetto.. Questa considerazione mi ha spinto a cercare una soluzione alternativa, che mi è stata suggerita da questo piccolo esempio che ho trovato su
del.icio.us.

Ho pensato così di preparare un post per presentare la versione che realizzato. Vediamo subito l'esempio.

Per quanto riguarda il codice HTML si tratta di una semplice lista non ordinata, in cui viene assegnato un id alla lista e un id a ciascuno dei list-item:


<ul id="rater">
<li id="r1"><a href="#1">1</a></li>
<li id="r2"><a href="#2">2</a></li>
<li id="r3"><a href="#3">3</a></li>
<li id="r4"><a href="#4">4</a></li>
<li id="r5"><a href="#5">5</a></li>
</ul>


Credo che tutti sappiate come rende una lista senza CSS. Vedremo ora come trasformarla
in uno star-rater. Per la grafica è stata usata una sola immagine di 80x48 pixel che racchiude due linee di stelle (per lo stato normale e lo stato hover) di 16 pixel separate da una striscia vuota alta anch'essa 16 pixels. Quest'ultima è essenziale per far si che i numeri sotto le stelle risultino apparentemente senza sfondo.

Per il rollover, è stata usata una variante del fast CSS Rollover. Il CSS dell'esempio è abbastanza semplice, anche se piuttosto denso concettualmente: oltre al rollover sono stati fondamentali i posizionamenti assoluti
e l'uso dello z-index. Procediamo quindi con il CSS. Per prima cosa rimuoviamo margini,
padding e marcatore da lista e list-item:


ul#rater,ul#rater li{margin: 0;padding: 0;list-style: none}


Ora la lista: assegneremo le dimensioni, il font, l'immagine di sfondo che mostrerà  le stelle in stato normale e la dichiareremo position:relative. Quest'ultima dichiarazione è necessaria per poter consentire il posizionamento assoluto al suo interno:


ul#rater{position: relative;width: 80px;height: 32px;
    background: #FFF url(stars.png);
    font: 10px Arial,sans-serif}


I list item verranno posizionati assolutamente all'interno della lista nell'angolo in alto a sinistra e ciascuno di essi avrà  un'altezza di 32 pixels:


ul#rater li{position: absolute;top: 0; left: 0;height: 32px}


Arriviamo così alla parte più concettuale dell'esempio. Ciascun list-item avrà  una larghezza tale da contenere il numero di stelle che indica: il primo quindi sarà  largo 16 pixel, il secondo 32 e così via... fino all'ultimo che sarà  largo quanto l'intera lista (80px). In questo modo avremo i list-item
sovrapposti, ed è importante quindi stabilire una sorta di ordine spaziale attraverso lo z-index. Questo ci permetterà  di rendere utilizzabili i link al loro interno:


li#r1{width: 16px;z-index: 5}
li#r2{width: 32px;z-index: 4}
li#r3{width: 48px;z-index: 3}
li#r4{width: 64px;z-index: 2}
li#r5{width: 80px;z-index: 1}


I link al loro interno saranno resi display:block, assumendo quindi la larghezza del list-item che lo contiene. Erediteranno anche lo z-index, così da essere in grado di intercettare il passaggio del mouse in maniera controllata.

Se passiamo il mouse sulla prima stella, lo avremo infatti in realtà  passato su tutte e cinque: lo z-index maggiore su di essa farà  sì che sia l'unica in grado di rilevarlo.

In maniera analoga, il mouse in corrispondenza della terza stella si dispone in realtà  sulla terza, la quarta e la quinta. Il list-item
con id="r3" ha z-index maggiore degli altri due coinvolti quindi il link relativo sarà  l'unico in grado di rilevare il mouse, dato che gli altri due sono disposti in realtà  "dietro" di esso. Lo z-index indica infatti una disposizione degli elementi
lungo l'asse "z", ovvero quello perpendicolare allo schermo, dando una sorta di tridimensionalità 
alla pagina.

Vediamo quindi le regole sui link: oltre a dichiararli display:block, aggiungeremo un padding verticale di 16 pixel così da lasciare spazio per la stella sopra il testo, che sarà  allineato a destra. Un padding destro di 5 pixel sarà  necessario per allineare il numerino sotto la corrispondente stella. Viene tolta la sottolineatura e assegnato un grigio molto chiaro al testo:


ul#rater a{display: block;padding: 16px 5px 0 0;

    text-align: right;text-decoration: none;color: #ccc}


Manca solo il rollover: al passaggio del mouse assegneremo ai link la parte inferiore dell'immagine. L'effetto si ottiene specificando per l'immagine una background-position verticale pari a -32 pixels, che ha l'effetto di traslarla verso l'alto e mostrare quindi la seconda linea di stelle, ovvero quelle cromaticamente più accese. Cambiamo infine il colore del testo, assegnando un blu acceso:


ul#rater a:hover{color: #675CFF;

    background: #FFF url(stars.png) no-repeat 0 -32px}


L'esempio è così ultimato: il CSS, anche se denso concettualmente, non si rivela particolarmente lungo. Tutto sta nel capire l'uso dello z-index. Per concludere, due parole sulla compatibilità  che è decisamente buona: è stato infatti testato su IE5, IE5.5, IE6, Firefox 1.5, Opera 8.5 e Safari. Alla prossima.