تگ های واکنشگرا

چاپ

Tags: انجام شده جدید! بیشتر !

تگ ها به عنوان نشانه ها: مشاهده !


 کلاس های تگ در W3.CSS

W3.CSS یک کلاس برای تگ ها ،برچسب ها و نشانه ها آماده کرده است:

کلاس تعریف
w3-tag تگ /برچسب مشکی مستطیلی

تگ ها، برچسب ها ونشان ها

در دنیای w3.CSS تفاوتی بین تگ،برچسب و نشانه وجود ندارد.


تگ های مستطیلی

کلاس w3-tag یک تگ مستطیلی(برچسب ،نشانه) ایجادمیکند.رنگ پیش فرض آن مشکی است.

وضعیت: انجام شده

مثال

<p>Status: <span class="w3-tag">Done</span></p>
خودتان امتحان کنيد »

تگ های رنگی

 کلاس w3-color برای تغییر رنگ تگ ها استفاده میشود:

جدید!

بیشتر !

مثال

<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>
خودتان امتحان کنيد »

اندازه های تگ

به صورت پیش فرض یک تگ اندازه والدش را به ارث میبرد.

کلاس های w3-size  ،برای تغییر اندازه تگ   (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) مورد استفاده قرار میگیرد:

6 6 6

66 66 66

66 66

شما ممکن است بخواهید مقداریpadding  بیشتر به تگ های بزرگتر بدهید:

مثال

<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
خودتان امتحان کنيد »

تگ های حروف

A U G U S T

مثال

<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>
خودتان امتحان کنيد »

نشان ها

نشان ها همان تگ های بزرگتر هستند.

London Zoo

مثال

<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
خودتان امتحان کنيد »

نشان های جاده ها

Falcon Ridge Parkway

مثال

<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-size برای نمایش نشان های بزرگ مورد استفاده قرار میگیرد:


درموارد اضطراری:
بازی RUN LIKE HELL!

مثال

<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>
خودتان امتحان کنيد »

نشان های گرد

کلاس های  w3-round-size برای افزودن گوشه های گرد به نشانه ها استفاده می شوند:

زیرآب
نفس
 نکشید

مثال

<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
خودتان امتحان کنيد »

تگ های چرخشی

ویژگی transform در css برای چرخش یک نشان ، مورد استفاده قرار میگیرد:

توقف

مثال

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
خودتان امتحان کنيد »

نکته: transform:rotate در نسخه های IE9 و قدیمی تر کار نمیکند.


تگ های درحال چرخش

کلاس w3-spin برای چرخش 360 درجه ای یک نشان استفاده می شود:

توقف

مثال

<span class="w3-tag w3-spin w3-large">
STOP
</span>
خودتان امتحان کنيد »