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
una sola immagine
Per il rollover, è stata usata una variante del fast CSS Rollover
esempio
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
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
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
z-index
Se passiamo il mouse sulla prima stella, lo avremo infatti in realtà passato su tutte e cinque: lo z-index
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"
z-index
z-index
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
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
ul#rater a:hover{color: #675CFF;
background: #FFF url(stars.png) no-repeat 0 -32px}
L'esempio
z-index
