I tag sono ormai una realtà sempre più presente su blog, siti di informazione,
social networks e siti genericamente identificati come Web2.0. In questo articolo vedremo due possibili modi per
abbellire un elenco di tag grazie a background e CSS. Cominciamo subito.
Tag scalabili con angoli arrotondati
Ecco il nostro primo esempio: si tratta di una lista
di tag in cui ciascuno ha gli angoli arrotondati. Il markup è semplice, e piuttosto
naturale: si tratta infatti di racchiudere l'elenco dei tag all'interno di una
lista non ordinata con classe "taglist". Ecco l'HTML:
<ul class="taglist">
<li><a href="#">CSS</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">web standards</a></li>
</ul>
Prima di passare al CSS, vediamo l'unica immagine utilizzata nell'esempio:
Fig. 1 - Immagine di sfondo per i tag
Si tratta di una PNG non trasparente larga 250 pixel a alta 20, che include
i due lati arrotondati. Anche se difficilmente ci saranno tag lunghi 250px, per essere
sicuri di non avere problemi di resa è bene avere un'immagine sufficientemente lunga.
Per quanto riguarda l'altezza, 20px ci dovrebbero consentire una buona resa anche
se l'utente ridimensiona il testo. Siamo ora pronti a procedere con il CSS.
Per prima cosa la lista ordinata. Dato che include elementi float, è necessario
poterli contenere di modo che il contenuto di pagina successivo non ne subisca l'effetto:
useremo quindi la tecnica Float nearly everything
di cui ho parlato in questa pagina
dell'articolo Float: teoria e pratica.
In sostanza, basterà specificare le dimensioni e rendere float la lista.
Qualora non fosse possibile assegnare una larghezza in pixel, basterà dichiarare
una larghezza pari al 100%. Verranno poi eliminati margini, il padding e il marcatore:
ul.taglist{float: left;width: 400px;
list-style-type: none;margin: 0;padding: 0}
Ora i list-item: verranno resi float, specificato un padding sinistro di 10px così da
predisporre lo spazio per l'immagine di sfondo, di cui si userà la parte sinistra.
Viene poi dichiarato un margine destro così da separarli visivamente:
ul.taglist li{float: left;
margin: 0 2px 7px 0;padding: 0 0 0 10px;
background: #EFEFEF url(tagbk.png) no-repeat top left}
Infine i link: anch'essi vengono resi float, viene eliminata la sottolineatura,
specificato un padding destro di 10px così da poter lasciar spazio all'immagine
di sfondo di cui si userà la parte destra. Vengono poi assegnati un'altezza e un'altezza
di linea di 20px, ovvero l'altezza dell'immagine. Per evitare che il testo all'interno
dei link si disponga su più righe nel caso i tag siano parole composte, è indispensabile
la dichiarazione white-space: nowrap che evita il ritorno a capo. Per lo stato
:hover, verrà cambiato semplicemente il colore del testo. Ecco quindi le due regole relative:
ul.taglist a{float: left;text-decoration: none;
height: 20px;line-height: 20px;
padding: 0 10px 0 0;background: url(tagbk.png) no-repeat top right;
color: #444;white-space: nowrap}
ul.taglist a:hover{color:#010159}
Rendere float list-item e link ci permette di avere ciascun tag auto-adattante
in larghezza: il punto essenziale è l'uso del padding e dello sfondo sui due elementi.
Il nostro esempio è così ultimato: da notare che
il testo dell'esempio è ridimensionabile, e dovrebbe garantire una buona resa anche
con font size grande. Se vorrete usare un font-size in pixel, il mio consiglio
è di specificare una dimensione di almeno 12 pixel.
Una tag list con etichette
Il secondo esempio che vedremo è palesemente ispirato da Blogmarks.
Questo sito per gestire i preferiti online presenta infatti la lista di tag di ciascun bookmark in
un modo decisamente accattivante. Ecco uno screenshot:
Fig. 2 - Screenshot da Blogmarks
Riprodurre un effetto simile è piuttosto semplice. Per sviluppare l'esempio ho
realizzato una semplice immagine larga 250px e alta 25, che riporto qui di seguito:
Fig. 3 - Immagine di sfondo per i tag
La realizzazione ha comportato davvero
poche modifiche al CSS del primo esempio: è bastato
cambiare margini e padding di list-item e link, oltre a cambiare altezza e altezza di linea dei link
in modo da adattare la nuova immagine di sfondo. Lascio al lettore lo studio del CSS dell'esempio,
che è incorporato nella pagina ed è del tutto simile al primo.
Una piccola nota finale. Questo secondo esempio è leggermente differente dalla fonte da cui
è ispirato. I tag
di Blogmarks, dato che non usano la proprietà white-space, si rompono su più righe in caso di
tag lunghi e con spazi. E, cosa molto importante, nell'esempio visto qui il font è ridimensionabile
ed ha una buona resa comunque. Risulta in tal senso un po' più
flessibile. Segue lo screeenshot che racchiude la tag list
visualizzato con il font-size più piccolo e il più grande su Internet Explorer:
Fig. 4 - Esempio al variare del font-size
Tempo di conclusioni. I due esempi visti dovrebbero costituire una buona base di partenza
per poter rendere accattivanti graficamente le vostre liste di tag. Sono
stati testati con successo su Internet Explorer dalla versione 5 alla 7, oltre che
sulle ultime versioni di Opera, Firefox e Safari.
Codice e immagini sono disponibili per il download. Alla prossima.
