Etichette o tag

Le etichette (definite anche tag, ma senza correlazione con i tag del linguaggio HTML) all'interno del framework w3.css rappresentano sostanzialmente dei testi stilizzati e di spicco, di solito raffigurati da un determinato colore di sfondo, un determinato colore del testo o delle determinate dimensioni/tipologia del font.

I tag vengono utilizzati, ad esempio, per raffigurare degli status inerenti delle operazioni ("Completed", "Error", "Done"), degli alert/avvisi particolarmente importanti, o ancora delle informazioni che si distinguono dal testo comune. Tuttavia siamo liberi di utilizzarli nella maniera più consona al nostro layout.

Le classi w3.css per i tags

Per realizzare le etichette, all'interno di w3.css abbiamo a disposizione la semplice classe w3-tag, che produce un rettangolo stilizzabile che si colloca sullo stesso livello e display del testo senza interromperlo.

Ad esempio, nel loro utilizzo più basilare, i tag sono prodotti in questa modalità:

<p>Status: <span class="w3-tag">Done</span></p>
<p>Status: <span class="w3-tag">Wrong</span></p>
<p>Status: <span class="w3-tag">Uncompleted</span></p>

Di default, un elemento stilizzato con la classe w3-tag possiede un colore del testo bianco posizionato su uno sfondo nero, un apposito padding ed un testo centrato.

Notiamo come abbiamo dovuto includere gli elementi span aventi classe w3-tag all'interno di elementi p per creare delle interruzioni di linea. Avendo la proprietà CSS display impostata al valore inline-block, infatti, le etichette possono essere dimensionate e stilizzate (blocco) ma si innestano una dopo l'altra senza produrre interruzioni (inline).

Dimensioni dei tag

Nel corso delle precedenti lezioni abbiamo visto come realizzare una miriade di effetti, combinando varie classi. Di default, infatti, i tag non possiedono una stilizzazione relativa a colori (bianco su nero), dimensioni, o stili avanzati. Tuttavia, possiamo incidere su queste caratteristiche tramite l'applicazione delle classi dedicate. Per impostare le dimensioni ad un tag, ad esempio, possiamo utilizzare le classi della famiglia w3-size, ovvero, in ordine crescente di grandezza:

• w3-tiny
• w3-small
• w3-large
• w3-xlarge
• w3-xxlarge
• w3-xxxlarge
• w3-jumbo

<span class="w3-tag w3-tiny w3-padding-large">Some text</span>
<span class="w3-tag w3-small w3-padding-large">Some text</span>
<span class="w3-tag w3-large w3-padding-large">Some text</span>
<span class="w3-tag w3-xlarge w3-padding-large">Some text</span>
<span class="w3-tag w3-xxlarge w3-padding-large">Some text</span>
<span class="w3-tag w3-xxxlarge w3-padding-large">Some text</span>
<span class="w3-tag w3-jumbo w3-padding-large">Some text</span>

L'effetto prodotto è un insieme di testi a grandezza crescente. In questo esempio abbiamo impostato la classe w3-padding-large in aggiunta alla classe w3-tag per allargare le dimensioni del padding verticale e di quello orizzontale.

Vediamo come produrre un interessante stilizzazione delle singole lettere di una frase, sia in direzione orizzontale:

<span class="w3-tag w3-xlarge">C</span>
<span class="w3-tag w3-xlarge">I</span>
<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">O</span>

sia in direzione verticale.

<p><span class="w3-tag w3-xlarge">C</span></p>
<p><span class="w3-tag w3-xlarge">I</span></p>
<p><span class="w3-tag w3-xlarge">A</span></p>
<p><span class="w3-tag w3-xlarge">O</span></p>

Colore dei tag

Cosi come possiamo impostare delle dimensioni personalizzate ai nostri tag, possiamo anche impostare dei colori personalizzati, grazie alle classi della famiglia w3-color. Ad esempio, possiamo impostare un colore blu alle etichette Like ed un colore rosso alle etichette Danger:

<p><span class="w3-tag w3-blue">Like!</span></p>
<p><span class="w3-tag w3-red">Danger!</span></p>

Ovviamente gli effetti sono cumulabili, quindi possiamo applicare sia dimensioni che colori specifici:

<p><span class="w3-tag w3-blue w3-jumbo">Like!</span></p>
<p><span class="w3-tag w3-red w3-tiny">Danger!</span></p>

Anche con i colori possiamo produrre effetti diretti alle singole lettere di una frase: in questo esempio andiamo a produrre un'etichetta di colore differente per ogni lettera della parola CIAO:

<span class="w3-tag w3-jumbo w3-red">C</span>
<span class="w3-tag w3-jumbo">I</span>
<span class="w3-tag w3-jumbo w3-yellow">A</span>
<span class="w3-tag w3-jumbo">O</span>

Se invece modifichiamo sia il colore che la dimensione, otteniamo un effetto ancor più fantasioso:

<span class="w3-tag w3-large w3-red">C</span>
<span class="w3-tag w3-tiny">I</span>
<span class="w3-tag w3-jumbo w3-yellow">A</span>
<span class="w3-tag w3-xlarge">O</span>

Bordi arrotondati

Le etichette, cosi come tutti i tag HTML, sono dei "rettangoli" aventi quattro angoli di 90 gradi. Come sappiamo, grazie alle specifiche CSS3, possiamo però agire sull'angolatura degli elementi grazie alla proprietà border-radius, che nel framework w3.css si applica attraverso le classi della famiglia w3-round, ovvero:

• w3-round
• w3-round-small
• w3-round-medium
• w3-round-large
• w3-round-xlarge
• w3-round-xxlarge

Ad esempio, possiamo applicare un arrotondamento dei bordi alle etichette dell'esempio precedente, che assumono così colore differente, dimensioni differenti e bordi arrotondati:

<span class="w3-tag w3-jumbo w3-red w3-round-xxlarge">C</span>
<span class="w3-tag w3-jumbo w3-round-xxlarge">I</span>
<span class="w3-tag w3-jumbo w3-yellow w3-round-xxlarge">A</span>
<span class="w3-tag w3-jumbo w3-round-xxlarge">O</span>

Tag innestati

Un interessante effetto è ottenibile anche innestando più tag (tag posizionati all'interno di altri tag):

<div class="w3-tag w3-round w3-red w3-padding-large">
<div class="w3-tag w3-round w3-red w3-border w3-border-white">
Error!
</div>
</div>

In questo caso la classe w3-tag è applicata sia all'elemento div contenitore, a cui è impostato un padding abbondante, sia all'elemento div interno, che possiede un bordo bianco. Entrambi gli elementi hanno sfondo rosso, dunque questo multi-tag è perfetto per eventuali messaggi di errore particolarmente importanti.

Animazioni e trasformazioni dei tag

Di default i tag sono elementi statici, ma possiamo certamente animarli grazie alle specifiche CSS3 ed alle classi w3.css dedicate! Ad esempio, tramite la classe w3-spin, possiamo far ruotare le nostre etichette in un loop infinito, per non farle passare certamente inosservate:

<span class="w3-tag w3-red w3-spin w3-large">
ERROR
</span>
<span class="w3-tag w3-green w3-spin w3-large">
CORRECT
</span>
<span class="w3-tag w3-orange w3-spin w3-large">
UNCOMPLETED
</span>

Se al posto di un'animazione dinamica vogliamo solamente modificare la posizione/direzione del tag sulle 3 dimensioni (effetto che nel CSS3 viene definito con il termine "trasformazione", possiamo ad esempio applicare l'apposita proprietà CSS transform settata su uno dei possibili valori offerti dalla specifica tramite l'attributo HTML style.

Ad esempio, per ruotare l'etichetta in una determinata direzione, utilizzeremo il valore "rotate" con l'apposita dimensione:

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
ERROR
</span>

O ancora, per alterare l'angolo di direzionamento sugli assi X e Y, possiamo usare la funzione skew:

<span class="w3-tag w3-xlarge w3-padding w3-red" style="style="-ms-transform: skew(20deg,10deg);
-webkit-transform: skew(20deg,10deg);
transform: skew(20deg,10deg);"">
ERROR
</span>

Possiamo davvero creare una moltitudine di composizioni mescolando classi w3.css e proprietà CSS.

Conclusioni

Le etichette/tag sono un divertente, semplice ed utile strumento a disposizione degli utilizzatori di w3.css per produrre con facilità testi particolarmente importanti (avvisi, stauts, cartelli, azioni, messaggi di rilievo e cosi via). In questa lezione abbiamo visto ancora una volta come combinando più classi w3.css sia possibile ottenere effetti davvero interessanti che possono essere ulteriormente personalizzati tramite classi costruite ad hoc oppure semplicemente tramite gli stili inline applicati attraverso l'attributo HTML style: le possibilità sono infinite.