Tag W3.CSS (Label dan Tanda)
Tag: Selesai Baru! Nanti lagi!
Tag sebagai tanda: Falcon Ridge Parkway BERHENTI! HATI-HATI!
Kelas Tag W3.CSS
W3.CSS menyediakan satu kelas untuk tag, label, dan tanda:
| Kelas | Mendefinisikan |
|---|---|
| w3 hari | Label/label hitam persegi panjang |
Tag, Label, dan Tanda
Di dunia W3.CSS tidak ada perbedaan nyata antara tag, label, atau tanda.
Tag berbentuk persegi panjang
Kelas w3-tag membuat tag persegi panjang (label atau tanda). Warna default adalah hitam:
Status: Selesai
Contoh
<p>Status: <span
class="w3-tag">Done</span></p>
Tag Berwarna
Gunakan kelas warna w3- untuk mengubah warna tag:
Baru!
Nanti lagi!
Contoh
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
Ukuran Tag
Secara default, tag akan mewarisi ukuran penampungnya.
Kelas ukuran w3- (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) dapat digunakan untuk mengubah ukuran tag:
6 6 6
66 66 66
66 66
Anda mungkin ingin menambahkan beberapa bantalan ekstra ke tag besar:
Contoh
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo
w3-blue w3-padding-large">66</span>
Tag Surat
Contoh
<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>
Contoh
<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>
Tanda-tanda
Tanda tidak lain adalah tag besar.
Contoh
<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
Tanda-tanda jalan
Contoh
<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>
Tanda Besar
Kelas ukuran w3 dapat digunakan untuk menampilkan tanda besar:
DALAM KASUSDARURAT:
LARI SEPERTI NERAKA!
Contoh
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
Contoh
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Tanda Bulat
Kelas ukuran bulat w3 dapat digunakan untuk menambahkan sudut membulat ke tanda:
JANGANBERNAPAS
DI BAWAH AIR
Contoh
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Memutar Tag
Gunakan properti transformasi CSS standar untuk memutar tanda:
BERHENTIContoh
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Catatan: transform:rotate() tidak berfungsi di IE 9 dan sebelumnya.
Berputar Tag
Kelas w3-spin dapat digunakan untuk membiarkan tanda berputar 360 derajat:
BERHENTIContoh
<span class="w3-tag w3-spin w3-large">
STOP
</span>