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

Normal

w3-opacity

w3-grayscale-max

w3-sepia-max

 


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

W3.CSS  کلاس های افکت زیر را فراهم میکند:

کلاستعریف
w3-opacityافزودن وضوح/ کدری به یک عنصر(opacity: 0.6)
w3-opacity-minافزودن وضوح/ کدری به یک عنصر(opacity: 0.75)
w3-opacity-maxافزودن وضوح/ کدری به یک عنصر(opacity: 0.25)
w3-grayscaleافزودن افکت سیاه وسفید به یک عنصر(grayscale: 75%)
w3-grayscale-minافزودن افکت سیاه و سفید به یک عنصر(grayscale: :50%)
w3-grayscale-maxافزودن افکت سیاه و سفید به یک عنصر(grayscale: :100%)
w3-sepiaافزودن افکت قرمز قهوه ای به یک عنصر(sepia: 75%)
w3-sepia-minافزودن افکت قرمز قهوه ای به یک عنصر(sepia: 50%)
w3-sepia-maxافزودن افکت قرمز قهوه ای به یک عنصر(sepia: 100%)
w3-hover-opacityافزودن وضوح به عنصر زمان رفتن موس روی عنصر (opacity: 0.6)
w3-hover-grayscaleافزودن افکت سیاه وسفید به عنصر زمان رفتن موس روی آن (grayscale: 100%)
w3-hover-sepiaافزودن افکت قرمز قهوه ای به عنصر زمان رفتن موس روی  آن
w3-text-shadowافزودن سایه به متن

وضوح

کلاس های  w3-opacity وضوح و روشنایی به یک عنصر می بخشند:

Normal

w3-opacity-min

w3-opacity

w3-opacity-max

 

مثال

<img src="/image.jpg" class="w3-opacity-min">
<img src="/image.jpg" class="w3-opacity">
<img src="/image.jpg" class="w3-opacity-max">
خودتان امتحان کنيد »

سیاه وسفید

کلاس های w3-grayscale افکت سیاه و سفید به یک عنصر می بخشند.

Normal

w3-grayscale-min

w3-grayscale

w3-grayscale-max

 

مثال

<img src="/image.jpg" class="w3-grayscale-min">
<img src="/image.jpg" class="w3-grayscale">
<img src="/image.jpg" class="w3-grayscale-max">
خودتان امتحان کنيد »

نکته : کلاس های w3-grayscale توسط IE11 و نسخه های قدیمی تر پشتیبانی نمی شوند.


قرمز قهوه ای

کلاس های w3-sepia یک افکت قرمز قهوه ای به عنصر می افزایند:

Normal

w3-sepia-min

w3-sepia

w3-sepia-max

 

مثال

<img src="/image.jpg" class="w3-sepia-min">
<img src="/image.jpg" class="w3-sepia">
<img src="/image.jpg" class="w3-sepia-max">
خودتان امتحان کنيد »

نکته :کلاس های w3-sepiaتوسط IE11  و نسخه های قدیمی تر پشتیبانی نمی شوند:


افکت های زمان   اعمال رویداد hover

شما میتوانید افکت های خاصی را زمان حرکت موس روی عناصربه آن بی افزایید.

Norway

w3-hover-opacity

Norway

w3-hover-grayscale

Norway

w3-hover-sepia

مثال

<img src="/image.jpg" class="w3-hover-opacity">
<img src="/image.jpg" class="w3-hover-grayscale">
<img src="/image.jpg" class="w3-hover-sepia">
خودتان امتحان کنيد »

وضوح رنگ ها زمان رفتن موس روی عناصر

شما میتوانید هرکدام از کلاس های w3-hover-color   را با کلاس های w3-hover-opacity برای اینکه رنگ پس زمینه را زمان  رفتن موس روی عنصرکمی روشن تر کنید ،ترکیب کنید.

w3-hover-red

w3-hover-red with w3-hover-opacity

مثال

<div class="w3-border w3-hover-opacity w3-hover-red">
  <p>w3-hover-red with w3-hover-opacity</p>
</div>
خودتان امتحان کنيد »

سایه متن

کلاس w3-text-shadow   به متن یک سایه اضافه میکند:

Text Shadow

 

Text Shadow

 

Text Shadow

 

Text Shadow

مثال

<h2 class="w3-text-shadow">Text Shadow</h2>
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان