Tags W3.CSS (Etiquetas e Sinais)
Tag: Feito Novo! Mais tarde!
Tags como sinais: Falcon Ridge Parkway PARE! ATENÇÃO!
Classes de tags W3.CSS
W3.CSS fornece uma classe para tags, rótulos e sinais:
| Classe | Define |
|---|---|
| w3 dia | Etiqueta/etiqueta retangular preta |
Tags, rótulos e sinais
No mundo W3.CSS não há diferença real entre uma etiqueta, um rótulo ou um sinal.
As tags são retangulares
A classe w3-tag cria uma tag retangular (rótulo ou sinal). A cor padrão é preto:
Status:Feito
Exemplo
<p>Status: <span
class="w3-tag">Done</span></p>
Etiquetas coloridas
Use uma classe w3 - color para alterar a cor de uma tag:
Novo!
Mais tarde!
Exemplo
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Tamanhos de tags
Por padrão, uma tag herdará o tamanho de seu contêiner.
As classes de tamanho w3 (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) podem ser usadas para modificar o tamanho de uma tag:
6 6 6
66 66 66
66 66
Você pode querer adicionar um preenchimento extra a tags grandes:
Exemplo
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Etiquetas de letras
Exemplo
<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>
Exemplo
<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>
Sinais
Os sinais nada mais são do que etiquetas grandes.
Exemplo
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Sinais de trânsito
Exemplo
<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 Sinais
As classes de tamanho w3 podem ser usadas para exibir sinais grandes:
EM CASO DEEMERGÊNCIA:
CORRA MUITO!
Exemplo
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Exemplo
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Sinais arredondados
As classes w3-round- size podem ser usadas para adicionar cantos arredondados a um sinal:
NÃORESPIRE
DEBAIXO DA ÁGUA
Exemplo
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Rotação de tags
Use a propriedade de transformação CSS padrão para girar um sinal:
PAREExemplo
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Nota: transform:rotate() não funciona no IE 9 e anteriores.
Tags giratórias
A classe w3-spin pode ser usada para deixar um sinal girar 360 graus:
PAREExemplo
<span class="w3-tag w3-spin w3-large">
STOP
</span>