W3.CSS Effects များ
ပုံမှန်
w3-အလင်းပိတ်
w3-မီးခိုးရောင်-အမြင့်ဆုံး
w3-နီညိုရောင်-မက်စ်
W3.CSS Effect အတန်းများ
W3.CSS သည် အောက်ပါအကျိုးသက်ရောက်မှုအတန်းများကို ပေးဆောင်သည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3-အလင်းပိတ် | ဒြပ်စင်တစ်ခုသို့ ပွင့်လင်းမြင်သာမှု/မြင်သာမှုကို ပေါင်းထည့်သည် (အလင်းဝင်မှု- 0.6) |
| w3-အလင်းပိတ်-မိနစ် | ဒြပ်စင်တစ်ခုသို့ ပွင့်လင်းမြင်သာမှု/မြင်သာမှုကို ပေါင်းထည့်သည် (အလင်းဝင်မှု- 0.75) |
| w3-opacity-အမြင့်ဆုံး | ဒြပ်စင်တစ်ခုသို့ ပွင့်လင်းမြင်သာမှု/မြင်သာမှုကို ပေါင်းထည့်သည် (အလင်းဝင်မှု- 0.25) |
| w3-မီးခိုးရောင်စကေး | ဒြပ်စင်တစ်ခုသို့ မီးခိုးရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (မီးခိုးရောင်စကေး- 75%) |
| w3-မီးခိုးရောင်-မိနစ် | ဒြပ်စင်တစ်ခုသို့ မီးခိုးရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (မီးခိုးရောင်စကေး- 50%) |
| w3-မီးခိုးရောင်-အမြင့်ဆုံး | ဒြပ်စင်တစ်ခုသို့ မီးခိုးရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (မီးခိုးရောင်စကေး- 100%) |
| w3 နီညိုရောင် | Adds a sepia effect to an element (sepia: 75%) |
| w3-sepia-min | Adds a sepia effect to an element (sepia: 50%) |
| w3-sepia-max | Adds a sepia effect to an element (sepia: 100%) |
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) |
| w3-hover-grayscale | Adds a grayscale effect to an element on hover (grayscale: 100%) |
| w3-hover-sepia | Adds a sepia effect to an element on hover |
Opacity
The w3-opacity classes add transparency to an element:
Normal
w3-opacity-min
w3-opacity
w3-opacity-max
Example
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
Grayscale
The w3-grayscale classes add a grayscale effect to an element:
Normal
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Example
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
Note: The w3-grayscale classes are not supported in IE 11 and earlier versions.
Sepia
The w3-sepia classes add a sepia effect to an element:
Normal
w3-sepia-min
w3-sepia
w3-sepia-max
Example
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
Note: The w3-sepia classes are not supported in IE 11 and earlier versions.
Hover Effects
You can also add special effects on hover/mouse-over.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Example
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
Hover Opacity Color
You can also combine any w3-hover-color classes with w3-hover-opacity to create a slightly "lighter" background color on hover:
w3-hover-red
w3-hover-red with w3-hover-opacity
Example
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>