W3.CSS Tag (etichette e segni)
tag: Fatto Nuovo! Più tardi!
Tag come segni: Falcon Ridge Parkway FERMARE! ATTENTO!
Classi di tag W3.CSS
W3.CSS fornisce una classe per tag, etichette e segni:
| Classe | Definisce |
|---|---|
| w3 giorno | Targhetta/etichetta rettangolare nera |
Tag, etichette e segni
Nel mondo W3.CSS non c'è alcuna reale differenza tra un tag, un'etichetta o un segno.
I tag sono rettangolari
La classe w3-tag crea un tag rettangolare (etichetta o segno). Il colore predefinito è nero:
Stato: Fatto
Esempio
<p>Status: <span
class="w3-tag">Done</span></p>
Tag colorati
Usa una classe w3- color per cambiare il colore di un tag:
Nuovo!
Più tardi!
Esempio
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Dimensioni delle etichette
Per impostazione predefinita, un tag erediterà la dimensione del suo contenitore.
Le classi di dimensioni w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) possono essere utilizzate per modificare la dimensione di un tag:
6 6 6
66 66 66
66 66
Potresti voler aggiungere un po' di riempimento extra ai tag di grandi dimensioni:
Esempio
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Etichette di lettere
Esempio
<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span
class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>
Esempio
<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span
class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>
Segni
I segni non sono altro che grandi tag.
Esempio
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Segnali stradali
Esempio
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div
class="w3-tag w3-round w3-green w3-border w3-border-white">
Falcon
Ridge Parkway
</div>
</div>
Segni grandi
Le classi di dimensioni w3 possono essere utilizzate per visualizzare i segni di grandi dimensioni:
IN CASO DIEMERGENZA:
CORRI COME L'INFERNO!
Esempio
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Esempio
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Segni arrotondati
Le classi w3-round- size possono essere utilizzate per aggiungere angoli arrotondati a un segno:
NONRESPIRARE
SOTTO L'ACQUA
Esempio
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Tag rotanti
Usa la proprietà di trasformazione CSS standard per ruotare un segno:
FERMAREEsempio
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Nota: transform:rotate() non funziona in IE 9 e precedenti.
Tag rotanti
La classe w3-spin può essere utilizzata per far ruotare un segno di 360 gradi:
FERMAREEsempio
<span class="w3-tag w3-spin w3-large">
STOP
</span>