تخفیف ویژه ماه مبارک رمضان، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: ramazan)

سبد خرید (0)

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

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