W3.CSS-tags (labels en tekens)
Trefwoorden: Gedaan Nieuw! Meer Later!
Labels als tekens: Falcon Ridge Parkway STOPPEN! KIJK UIT!
W3.CSS-tagklassen
W3.CSS biedt één klasse voor tags, labels en tekens:
| Klas | definieert |
|---|---|
| w3 dag | Rechthoekig zwart label/label |
Tags, labels en tekens
In de W3.CSS-wereld is er geen echt verschil tussen een tag, een label of een bord.
Tags zijn rechthoekig
De klasse w3-tag maakt een rechthoekige tag (label of teken). De standaardkleur is zwart:
Toestand: Gedaan
Voorbeeld
<p>Status: <span
class="w3-tag">Done</span></p>
Gekleurde Tags
Gebruik een w3 -kleurklasse om de kleur van een tag te wijzigen:
Nieuw!
Meer Later!
Voorbeeld
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Tagformaten
Standaard neemt een tag de grootte van zijn container over.
De w3 - grootteklassen (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) kunnen worden gebruikt om de grootte van een tag te wijzigen:
6 6 6
66 66 66
66 66
Misschien wilt u wat extra opvulling toevoegen aan grote tags:
Voorbeeld
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Letter Tags
Voorbeeld
<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>
Voorbeeld
<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>
Tekens
Borden zijn niets anders dan grote tags.
Voorbeeld
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Verkeersborden
Voorbeeld
<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>
Grote borden
De w3-maatklassen kunnen worden gebruikt om grote borden weer te geven:
IN GEVAL VANNOOD:
REN ALS DE HEL!
Voorbeeld
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Voorbeeld
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Afgeronde tekens
De klassen w3-rond- maat kunnen worden gebruikt om afgeronde hoeken aan een bord toe te voegen:
NIETADEMEN
ONDER WATER
Voorbeeld
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Roterende tags
Gebruik de standaard CSS-transformatie-eigenschap om een teken te roteren:
STOPPENVoorbeeld
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Opmerking: transform:rotate() werkt niet in IE 9 en eerder.
Tags draaien
De klasse w3-spin kan worden gebruikt om een bord 360 graden te laten draaien:
STOPPENVoorbeeld
<span class="w3-tag w3-spin w3-large">
STOP
</span>