Embedded Files
W3.CSS Tags (Labels and Signs)
W3.CSS Tags (Labels and Signs)
Tags: Done New! More Later!
Tags as signs: Falcon Ridge Parkway STOP! WATCH OUT!
W3.CSS Tag Classes
W3.CSS Tag Classes
W3.CSS provides one class for tags, labels, and signs:
Class
Defines
w3-tag
Rectangular black tag/label
Tags, Labels, and Signs
Tags, Labels, and Signs
In the W3.CSS world there is no real difference between a tag, a label, or a sign.
Tags are Rectangular
Tags are Rectangular
The w3-tag class creates a rectangular tag (label or sign). The default color is black:
Status: Done
Example
Example
<p>Status: <span class="w3-tag">Done</span></p>
Colored Tags
Colored Tags
Use a w3-color class to change the color of a tag:
New!
More Later!
Example
Example
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>
Tag Sizes
Tag Sizes
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:
6 6 6
66 66 66
66 66
You might want to add some extra padding to large tags:
Example
Example
<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
Letter Tags
A U G U S T
Example
Example
<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
Example
Example
<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
Signs
Signs are nothing but large tags.
London Zoo
Example
Example
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Road Signs
Road Signs
Falcon Ridge Parkway
Example
Example
<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>
Large Signs
Large Signs
The w3-size classes can be used to display large signs:
IN CASE OF
EMERGENCY:
RUN LIKE HELL!
Example
Example
<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
Example
Example
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Rounded Signs
Rounded Signs
The w3-round-size classes can be used to add rounded corners to a sign:
DO NOT
BREATHE
UNDER WATER
Example
Example
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Rotating Tags
Rotating Tags
Use the standard CSS transform property to rotate a sign:
STOP
Example
Example
<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.
Spinning Tags
Spinning Tags
The w3-spin class can be used to let a sign spin 360 degrees:
STOP
Example
Example
<span class="w3-tag w3-spin w3-large">
STOP
</span>
CONFIDENTIALITY / COPYRIGHT NOTICE: This site and my information and any attachments contains the PRIVILEGED AND CONFIDENTIAL INFORMATION of Fred Finkelstein & Irondesigner DBA / LLC mutually, Inc., its affiliated corporations or legal entities, and is intended only for the use of the individual(s) named above. If you are not the intended recipient of this e-mail or invited to this site, or the employee or agent responsible for delivering this to the intended recipient, you are hereby notified that any unlawful interception, dissemination, disclosure, printing or copying of this e-mail or site or any attachments is strictly prohibited under the Electronics Communication Privacy Act (ECPA), 18 USCA 2510, 18 USCA 2511, and any applicable laws. If you have received this e-mail or viewing this site in error, please delete or destroy it & close down, including all attachments or copies, and immediately notify us by e-mail at mechanicalengrg@gmail.com
Page updated
Google Sites
Report abuse