แท็ก W3.CSS (ป้ายและป้าย)
แท็ก: เสร็จแล้ว ใหม่! เพิ่มเติมในภายหลัง!
แท็กเป็นสัญญาณ: ฟอลคอน ริดจ์ ปาร์คเวย์ หยุด! ระวัง!
คลาสแท็ก W3.CSS
W3.CSS มีคลาสเดียวสำหรับแท็ก ป้ายกำกับ และป้าย:
| ระดับ | กำหนด |
|---|---|
| w3 วัน | ป้าย/ป้ายสีดำ สี่เหลี่ยม |
แท็ก ป้าย และป้าย
ในโลก W3.CSS ไม่มีความแตกต่างอย่างแท้จริงระหว่างแท็ก ป้ายกำกับ หรือเครื่องหมาย
แท็กเป็นรูปสี่เหลี่ยมผืนผ้า
คลาสw3-tagสร้างแท็กสี่เหลี่ยม (ป้ายกำกับหรือเครื่องหมาย) สีเริ่มต้นคือสีดำ:
สถานะ:เสร็จแล้ว
ตัวอย่าง
<p>Status: <span
class="w3-tag">Done</span></p>
แท็กสี
ใช้ คลาส สี w3-เพื่อเปลี่ยนสีของแท็ก:
ใหม่!
เพิ่มเติมในภายหลัง!
ตัวอย่าง
<p><span class="w3-tag w3-blue">New!</span></p>
<p><span
class="w3-tag w3-teal">More Later!</span></p>
ขนาดแท็ก
โดยค่าเริ่มต้น แท็กจะสืบทอดขนาดของคอนเทนเนอร์
คลาส ขนาดw3- ( w3 -tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) สามารถใช้ในการปรับเปลี่ยนขนาดของแท็ก:
6 6 6
66 66 66
66 66
คุณอาจต้องการเพิ่มช่องว่างภายในเพิ่มเติมให้กับแท็กขนาดใหญ่:
ตัวอย่าง
<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>
ตัวอย่าง
<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>
ป้าย
ป้ายไม่ใช่อะไรนอกจากแท็กขนาดใหญ่
ตัวอย่าง
<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>
ป้ายขนาดใหญ่
คลาส ขนาดw3สามารถใช้เพื่อแสดงป้ายขนาดใหญ่:
ในกรณีฉุกเฉิน:
วิ่งอย่างนรก!
ตัวอย่าง
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
ตัวอย่าง
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
ป้ายกลม
สามารถใช้คลาส ขนาดw3 เพื่อเพิ่มมุมโค้ง มนให้กับป้ายได้:
ห้ามหายใจ
ใต้น้ำ
ตัวอย่าง
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
แท็กหมุน
ใช้คุณสมบัติการแปลง CSS มาตรฐานเพื่อหมุนเครื่องหมาย:
หยุดตัวอย่าง
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
หมายเหตุ: transform:rotate() ไม่ทำงานใน IE 9 และรุ่นก่อนหน้า
แท็กการปั่น
คลาสw3-spinสามารถใช้เพื่อให้สัญญาณหมุนได้ 360 องศา:
หยุดตัวอย่าง
<span class="w3-tag w3-spin w3-large">
STOP
</span>