CSS  »  Articoli  »  Effetti con CSS 

Questa è la traduzione dell'articolo Tag Clouds - Styling and Adding Sort Options di Alen Grakalic pubblicato originariamente su CSS Globe il 31 Marzo 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Gli utenti hanno opinioni molto diverse quando si parla di tag cloud. Qualunque siano le preferenze di ciascuno, comunque, categorizzare degli item (per esempio i post di un blog) usando i tag è cosa divenuta popolare e molto diffusa. In questo articolo vedremo come poter gestire le tag cloud usando i CSS e Javascript.

Ecco subito la demo dell'esempio finale che andremo a realizzare. Potete anche scaricare un pacchetto zip contenente tutti i file utilizzati.

L'articolo consiste di due parti. La prima è relativa al markup HTML e agli stili applicati con i CSS; la seconda è dedicata all'aggiunta di una semplice interazione alla tag cloud usando Javascript. Mostrerò il mio modo di applicare uno stile alla tag cloud, sebbene possiate trovare in rete molti altri tutorial simili dedicati all'argomento.

HTML e CSS

Una tag cloud è una lista di link. Punto. L'unico elemento accettabile per organizzare i tag è una lista, ordinata o non ordinata. Il mio suggerimento è di usare una lista non ordinata per via della natura stessa delle tag cloud, che non hanno di per sé una struttura 'ordinata'. Nella maggior parte dei casi non avremo bisogno di elementi contenitori, la lista dovrebbe essere più che sufficiente. Ma se avete particolari esigenze a livello di stili potete fare un compromesso e aggiungere un div contenitore intorno alla lista. Alla fine di tutto avremo questo codice:

<div class="tags">
	<ul>
		<li class="tag1"><a href="#">Lorem ipsum</a></li> 
	</ul>
</div>

In base a certi parametri, gli item compresi nella tag cloud avranno un differente trattamento visuale. L'idea è quella di dare enfasi agli item con un maggiore valore (per esempio i tag più usati). Ciò si ottiene in genere dando una dimensione e un peso maggiore a questi ultimi. Ecco un esempio.

Figura 1 - Esempio di tag cloud "tradizionale"

L'altra opzione è di usare il colore e il contrasto per ottenere lo stesso risultato. In questo esempio, gli item con un valore inferiore hanno un contrasto minore e quelli con un valore maggiore un contrasto più alto.

Figura 2 - Esempio di tag cloud alternativa basata sui colori

Sebbene le tag cloud siano generate da un CMS a livello di back-end, il mio suggerimento è quello di usare nomi di classe per identificare gli item in base al loro valore. È infatti molto più facile cambiare una riga nel foglio di stile per modificare l'aspetto della tag cloud. A seconda del numero di step di valori, aggiungete un nome di classe tipo "tag1", "tag2", etc, dove la classe con il valore 1 dovrebbe definire gli item con i valori più bassi e quelle con numeri maggiori a 1 gli item con i valori più alti.

Altri articoli

Altre guide

Altre newsletter