افکت های واکنشگرا
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">
<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">
<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">
<img src="/image.jpg" class="w3-sepia-max">
نکته :کلاس های w3-sepiaتوسط IE11 و نسخه های قدیمی تر پشتیبانی نمی شوند:
افکت های زمان اعمال رویداد hover
شما میتوانید افکت های خاصی را زمان حرکت موس روی عناصربه آن بی افزایید.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
مثال
<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
مثال
<p>w3-hover-red with w3-hover-opacity</p>
</div>
سایه متن
کلاس w3-text-shadow به متن یک سایه اضافه میکند:
Text Shadow
Text Shadow
Text Shadow
Text Shadow
- نوشته شده توسط زهرا داوودی
- بازدید: 3558
