CSS  »  Articoli  »  Effetti con CSS 

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:

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:

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:

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:

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.

Altri articoli

Altre guide

Altre newsletter