HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Tags:DoneNew!More Later!
W3.CSS provides one class for tags, labels, and signs:
Class | Defines |
---|---|
w3-tag | Rectangular black tag/label |
In the W3.CSS world there is no real difference between a tag, a label, or a sign.
The w3-tag class creates a rectangular tag (label or sign). The default color is black:
Status: Done
<p>Status: <span
class="w3-tag">Done</span></p>
Use a w3-color class to change the color of a tag:
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
By default, a tag will inherit the size of its container.
The w3-size classes (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) can be used to modify the size of a tag:
You might want to add some extra padding to large tags:
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
<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>
S
A
L
E
<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>
Signs are nothing but large tags.
London Zoo
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
<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>
The w3-size classes can be used to display large signs:
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
49,99
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
The w3-round-size classes can be used to add rounded corners to a sign:
DO NOT
BREATHE
UNDER WATER
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Use the standard CSS transform property to rotate a sign:
STOP
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Note: transform:rotate() does not work in IE 9 and earlier.
The w3-spin class can be used to let a sign spin 360 degrees:
STOP
<span class="w3-tag w3-spin w3-large">
STOP
</span>