W3.CSS effektlar
W3.CSS effekt klasslari
W3.CSS shaffoflik, kulrang tus, sepiya va hover effektlari uchun klasslarni taqdim etadi.
Bu effektlarni rasmlarga va boshqa HTML elementlarga qo‘llash mumkin.
w3-grayscale
Oddiy
w3-opacity
w3-sepia
| Klass | Vazifasi |
|---|---|
w3-opacity |
Elementga shaffoflik qo‘shadi |
w3-opacity-min |
Ozgina shaffoflik qo‘shadi |
w3-opacity-max |
Kuchli shaffoflik qo‘shadi |
w3-grayscale |
Kulrang tus effektini qo‘shadi |
w3-grayscale-min |
Kuchsiz kulrang tus effektini qo‘shadi |
w3-grayscale-max |
To‘liq kulrang tus effektini qo‘shadi |
w3-sepia |
Sepiya effektini qo‘shadi |
w3-sepia-min |
Kuchsiz sepiya effektini qo‘shadi |
w3-sepia-max |
To‘liq sepiya effektini qo‘shadi |
w3-hover-opacity |
Sichqoncha ustiga kelganda shaffoflik qo‘shadi |
w3-hover-grayscale |
Sichqoncha ustiga kelganda kulrang tus qo‘shadi |
w3-hover-sepia |
Sichqoncha ustiga kelganda sepiya qo‘shadi |
Shaffoflik
w3-opacity klasslari elementga shaffoflik qo‘shadi:
Oddiy
w3-opacity-min
w3-opacity
w3-opacity-max
Misol
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
O‘zingiz sinab ko‘ring »
Kulrang tus
w3-grayscale klasslari elementga kulrang tus effektini qo‘shadi:
Oddiy
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Misol
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
O‘zingiz sinab ko‘ring »
Sepiya
w3-sepia klasslari elementga sepiya effektini qo‘shadi:
Oddiy
w3-sepia-min
w3-sepia
w3-sepia-max
Misol
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
O‘zingiz sinab ko‘ring »
Hover effektlari
W3.CSS foydalanuvchi sichqonchani element ustiga olib borganda ham effektlarni qo‘llashi mumkin.
Effektni ko‘rish uchun sichqonchani rasmlar ustiga olib boring.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Misol
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
O‘zingiz sinab ko‘ring »
Rangli hover shaffofligi
Ochroq hover rangini yaratish uchun w3-hover-color klassini w3-hover-opacity bilan birlashtiring:
w3-hover-red
w3-hover-red with w3-hover-opacity
Misol
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!