W3.CSS rasmlar
Rasmlar
W3.CSS moslashuvchan va jozibali rasmlarni bezash uchun klasslarni taqdim etadi.
Rasmlar yumaloq burchaklar, chegaralar, kartochkalar, effektlar va ustki qatlamlarga (overlay) ega bo‘lishi mumkin.
Moslashuvchan rasmlar
w3-image klassi rasmni moslashuvchan qiladi.
Rasm kerak bo‘lganda kichrayadi, lekin asl o‘lchamidan kattalashmaydi.
Eslatma
Moslashuvchan rasmlar rasmlarning o‘z konteyneridan kengroq bo‘lib ketishining oldini oladi.
To‘liq kenglikdagi rasmlar
Rasm o‘z konteynerining butun kengligini egallashini istasangiz, width:100% dan foydalaning.
Rasmning maksimal kengligi
Rasmni haddan tashqari kattalashib ketmaydigan moslashuvchan qilish uchun width:100% ni max-width bilan birlashtirishingiz mumkin.
Misol
<img src="img_lights.jpg" alt="Northern Lights" style="width:100%;max-width:400px">
O‘zingiz sinab ko‘ring »
Yumaloq burchakli rasmlar
w3-round klassi rasmga yumaloq burchaklar qo‘shadi.
Doira shaklidagi rasmlar
w3-circle klassi rasmni doira shakliga keltiradi.
Misol
<img src="img_snowtops.jpg" class="w3-image w3-circle" alt="Norway" style="width:250px;height:250px;object-fit:cover">
O‘zingiz sinab ko‘ring »
object-fit xususiyati
CSS’ning object-fit:cover; xususiyati rasmni asl tomonlar nisbatini saqlagan holda konteynerni to‘ldiradigan qilib masshtablaydi. Agar rasm konteynerining tomonlar nisbatiga mos kelmasa, cho‘zilib buzilmasligi uchun rasm chetlari bo‘ylab qirqiladi.
Mukammal doira hosil bo‘lishi uchun rasmning kengligi va balandligi bir xil bo‘lishi kerak.
Chegarali rasmlar
Rasm atrofiga chegara qo‘shish uchun w3-border dan foydalaning.
Miniatyura (thumbnail) effektini yaratish uchun ichki bo‘shliq (padding) qo‘shish mumkin.
Misol
<img src="img_snowtops.jpg" class="w3-border w3-padding" alt="Norway">
O‘zingiz sinab ko‘ring »
Kartochka ko‘rinishidagi rasm
Oddiy rasmli kartochka yaratish uchun rasmni w3-card bilan birlashtiring.
Simon
The boss of all bosses
Misol
<div class="w3-card">
<img src="img_avatar.png" alt="Person" style="width:100%">
<div class="w3-container">
<h3>Simon</h3>
<p>The boss of all bosses</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Rasm ustidagi matn
Kontentni rasm ustida joylashtirish uchun w3-display-container va display klasslaridan foydalaning.
Norway
Northern Lights
Misol
<div class="w3-display-container w3-text-white">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-display-bottomleft w3-container">
Norway
</div>
</div>
O‘zingiz sinab ko‘ring »
Display klasslari yordamida joylashtirish haqida W3.CSS display klasslari bobida batafsil o‘rgangansiz.
Rasm shaffofligi
w3-opacity klasslari rasmlarni shaffof qiladi:
w3-opacity-min
w3-opacity
w3-opacity-max
Misol
<img src="image.jpg" class="w3-image w3-opacity-min">
<img src="image.jpg" class="w3-image w3-opacity">
<img src="image.jpg" class="w3-image w3-opacity-max">
O‘zingiz sinab ko‘ring »
Sichqoncha ustiga kelgandagi rasm effektlari
Rasm effektlarini foydalanuvchi sichqonchani rasm ustiga olib borganda ham qo‘llash mumkin.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Misol
<img src="image.jpg" class="w3-image w3-hover-opacity" alt="Norway">
<img src="image.jpg" class="w3-image w3-hover-grayscale" alt="Norway">
<img src="image.jpg" class="w3-image w3-hover-sepia" alt="Norway">
O‘zingiz sinab ko‘ring »
Kulrang tus darajalari
w3-grayscale klasslari rasmga kulrang tus (grayscale) effektini qo‘shadi:
Oddiy
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Misol
<img src="image.jpg" class="w3-image w3-grayscale-min">
<img src="image.jpg" class="w3-image w3-grayscale">
<img src="image.jpg" class="w3-image w3-grayscale-max">
O‘zingiz sinab ko‘ring »
Sepiya darajalari
w3-sepia klasslari elementga sepiya effektini qo‘shadi.
Oddiy
w3-sepia-min
w3-sepia
w3-sepia-max
Misol
<img src="image.jpg" class="w3-image w3-sepia-min">
<img src="image.jpg" class="w3-image w3-sepia">
<img src="image.jpg" class="w3-image w3-sepia-max">
O‘zingiz sinab ko‘ring »
Hover’da yoqish/o‘chirish
w3-hover-opacity klassi sichqoncha ustiga kelganda rasmga shaffoflik qo‘shadi.
w3-hover-opacity-off klassi sichqoncha ustiga kelganda shaffoflikni olib tashlaydi.
Sichqoncha ustiga kelganda shaffoflik qo‘shish:
Sichqoncha ustiga kelganda shaffoflikni olib tashlash:
Misol
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">
O‘zingiz sinab ko‘ring »
Fotoalbom
Fotoalbom yaratish uchun rasmlar, kartochkalar va W3.CSS moslashuvchan maket klasslarini birlashtirish mumkin.
5 Terre
Monterosso
Vernazza
Misol
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container">
<p>Monterosso</p>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Katta hero rasmlar
"Hero rasm" — veb-bannerning ma’lum bir turini bildiruvchi atama.
Hero rasm — veb-sahifaning boshida joylashtiriladigan katta rasm. U ko‘pincha rasm va matndan iborat bo‘ladi hamda statik yoki almashinib turadigan rasmlar ro‘yxati bo‘lishi mumkin.
Hero rasmning maqsadi — veb-saytning eng muhim kontentini taqdim etish.
Brought to you by Captain Hook
Welcome to my Sailing Web
Sailing comprises wind propulsion of a craft by means of sails and steering it over water, ice or land, depending on the type of craft. A sailor manages the force of the wind on the sails by adjusting their angle with respect to the moving sailing craft and sometimes by adjusting the sail area. The force transmitted from the sails is resisted by forces from the hull, keel, and rudder of a sailing craft, by forces from skate runners for an iceboat, and by forces from wheels for a land sailing craft to allow steering a course on a point of sail with respect to the true wind. (Wikipedia)
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!