Značky W3.CSS (štítky a značky)
Štítky: Hotovo Nový! Více později!
Tagy jako znamení: Falcon Ridge Parkway STOP! DÁVEJ SI POZOR!
Třídy značek W3.CSS
W3.CSS poskytuje jednu třídu pro značky, štítky a znaky:
| Třída | Definuje |
|---|---|
| w3 den | Obdélníkový černý štítek/štítek |
Štítky, štítky a nápisy
Ve světě W3.CSS není žádný skutečný rozdíl mezi tagem, štítkem nebo znakem.
Štítky jsou obdélníkové
Třída w3-tag vytváří obdélníkový tag (štítek nebo znak). Výchozí barva je černá:
Postavení: Hotovo
Příklad
<p>Status: <span
class="w3-tag">Done</span></p>
Barevné štítky
Ke změně barvy značky použijte třídu barev w3- :
Nový!
Více později!
Příklad
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Velikosti štítků
Ve výchozím nastavení značka zdědí velikost svého kontejneru.
Třídy velikosti w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) lze použít k úpravě velikosti tagu:
6 6 6
66 66 66
66 66
Možná budete chtít přidat další odsazení do velkých značek:
Příklad
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Dopisové značky
Příklad
<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>
Příklad
<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>
Známky
Cedule nejsou nic jiného než velké štítky.
Příklad
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Dopravní značky
Příklad
<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>
Velké cedule
Třídy velikosti w3 lze použít k zobrazení velkých znaků:
V PŘÍPADĚNOUZE:
BĚŽTE JAKO PEKLO!
Příklad
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Příklad
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Zaoblené znaky
Třídy kulatých velikostí w3 lze použít k přidání zaoblených rohů ke značce:
NEDÝCHEJTEPOD
VODOU
Příklad
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Rotující značky
K otočení znaménka použijte standardní vlastnost transformace CSS:
STOPPříklad
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Poznámka: transform:rotate() nefunguje v IE 9 a starších verzích.
Spinning Tagy
Třídu w3-spin lze použít k tomu, aby se znak otáčel o 360 stupňů:
STOPPříklad
<span class="w3-tag w3-spin w3-large">
STOP
</span>