Balises W3.CSS (étiquettes et signes)
Mots clés: Fait Nouvelle! Plus tard!
Balises comme signes : Promenade Falcon Ridge ARRÊTER! FAIS ATTENTION!
Classes de balises W3.CSS
W3.CSS fournit une classe pour les balises, les étiquettes et les signes :
| Classer | Définit |
|---|---|
| w3 jour | Etiquette/étiquette noire rectangulaire |
Étiquettes, étiquettes et panneaux
Dans le monde W3.CSS, il n'y a pas vraiment de différence entre une balise, une étiquette ou un signe.
Les balises sont rectangulaires
La classe w3-tag crée une balise rectangulaire (étiquette ou signe). La couleur par défaut est le noir :
Statut: Fait
Exemple
<p>Status: <span
class="w3-tag">Done</span></p>
Balises colorées
Utilisez une classe w3 - color pour changer la couleur d'un tag :
Nouvelle!
Plus tard!
Exemple
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Tailles des balises
Par défaut, une balise héritera de la taille de son conteneur.
Les classes w3 - size (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) permettent de modifier la taille d'un tag :
6 6 6
66 66 66
66 66
Vous voudrez peut-être ajouter un rembourrage supplémentaire aux balises volumineuses :
Exemple
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Étiquettes de lettre
Exemple
<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>
Exemple
<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>
Panneaux
Les signes ne sont rien d'autre que de grandes balises.
Exemple
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Panneaux routiers
Exemple
<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>
Grandes enseignes
Les classes de taille w3- peuvent être utilisées pour afficher de grands panneaux :
EN CAS D'URGENCE :
COUREZ COMME L'ENFER !
Exemple
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Exemple
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Signes arrondis
Les classes w3-round- size peuvent être utilisées pour ajouter des coins arrondis à un panneau :
NE PASRESPIRER
SOUS L'EAU
Exemple
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Rotation des balises
Utilisez la propriété de transformation CSS standard pour faire pivoter un signe :
ARRÊTERExemple
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Remarque : transform:rotate() ne fonctionne pas dans IE 9 et versions antérieures.
Balises tournantes
La classe w3-spin peut être utilisée pour faire tourner un panneau à 360 degrés :
ARRÊTERExemple
<span class="w3-tag w3-spin w3-large">
STOP
</span>