Una tag cloud formattata con i CSS può essere realizzata in diversi modi. Possiamo scegliere di usare una lista non ordinata o di inserire i link direttamente all'interno di un contenitore generico. Di norma ciascun link ha una classe CSS ad esso associata che ne regola la dimensione del font, il colore ed altri aspetti. Questa classe CSS viene generata in base al numero di contenuti associati a ciascun tag. Quindi se al tag "css" sono associati 100 articoli, il link avrà una dimensione del font superiore a quella di un tag a cui sono associati 20 articoli. Possiamo aggiungere ai link un ulteriore effetto con i CSS3, ossia una rotazione lungo il loro asse in modo che il testo sia visualizzato in verticale. Vediamo come.
Abbiamo una marcatura di questo tipo:
<div id="tag-cloud">
<a href="#" class="tag-1">css</a>
<a href="#" class="tag-2">xhtml</a>
<a href="#" class="tag-3">svg</a>
<a href="#" class="tag-4">jquery</a>
<a href="#" class="tag-5">javascript</a>
<a href="#" class="tag-6">xml</a>
<a href="#" class="tag-7">html5</a>
</div>
Come faccio a generare delle classi CSS incrementali?
Se stai utilizzando un CMS come Wordpress, le classi CSS vengono automaticamente generate dal CMS. In caso contrario, devi:
- Stabilire un limite massimo e minimo di articoli correlati a ciascun tag (per esempio 10 e 100)
- Stabilire degli intervalli intermedi tra il limite minimo e massimo.
- A ciascun intervallo associ una classe a cui darai degli stili diversi.
- Interrogare il database e conteggiare il numero di risultati ottenuti per ciascun tag.
- Verificare a quale intervallo appartiene ciascun numero di risultati ottenuti.
Useremo il posizionamento assoluto per posizionare esattamente ciascun link all'interno del contenitore principale. Ciascuna classe avrà degli stili diversi in modo da differenziare i link per dimensione del font e colore del testo:
#tag-cloud {
width: 400px;
height: 300px;
margin: 0 auto;
padding: 2em 0;
font: 100% 'Yanone Kaffeesatz', Arial, sans-serif;
position: relative;
}
#tag-cloud a {
position: absolute;
text-decoration: none;
}
#tag-cloud .tag-1 {
top: 1em;
left: 1.5em;
font-size: 100px;
color: #626262;
}
#tag-cloud .tag-2 {
top: 0;
left: 1em;
font-size: 80px;
color: #906060;
}
#tag-cloud .tag-3 {
top: 1em;
left: 1.5em;
font-size: 60px;
color: #c5c5c5;
}
Alcune classi CSS faranno ruotare di 90 gradi in senso antiorario il testo dei link:
#tag-cloud .tag-4 {
top: 1em;
left: 0;
font-size: 40px;
color: #511c1c;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#tag-cloud .tag-5 {
top: 1.5em;
right: -0.3em;
color: #666;
font-size: 70px;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#tag-cloud .tag-6 {
bottom: 0;
right: 1em;
color: #5e0000;
font-size: 120px;
}
#tag-cloud .tag-7 {
bottom: 0.6em;
left: 0;
color: #6e6e6e;
font-size: 90px;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
La proprietà standard CSS3 transform viene usata dopo le estensioni specifiche dei browser. In questo modo siamo sicuri che se il browser la supporta, userà quella invece dell'estensione proprietaria.
Potete visionare l'esempio finale in questa pagina.