W3.CSS ranglari
Ranglar bilan oson ishlash
Ranglar veb-dizaynning muhim qismidir.
W3.CSS istalgan HTML elementiga rang qo‘shishni osonlashtiradi.
London
London is the capital of England.
Misol
<div class="w3-container w3-blue">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
O‘zingiz sinab ko‘ring »
Fon ranglari
W3.CSS rang klasslari yordamida istalgan HTML elementining fon rangini belgilash mumkin.
Red
Green
Blue
Misol
<div class="w3-panel w3-red">
<p>Red</p>
</div>
<div class="w3-panel w3-green">
<p>Green</p>
</div>
<div class="w3-panel w3-blue">
<p>Blue</p>
</div>
O‘zingiz sinab ko‘ring »
| Klass | Rang |
|---|---|
w3-red |
Red |
w3-green |
Green |
w3-blue |
Blue |
w3-black |
Black |
Klass nomi rangni bildiradi.
Matn ranglari
Matn rangini o‘zgartirish uchun w3-text-color klasslaridan foydalaning.
Qizil matn
Yashil matn
Ko‘k matn
Misol
<h3 class="w3-text-red">Red Text</h3>
<h3 class="w3-text-green">Green Text</h3>
<h3 class="w3-text-blue">Blue Text</h3>
O‘zingiz sinab ko‘ring »
Chegara ranglari
Chegara ranglari uchun w3-border- bilan boshlanadigan klasslardan foydalaniladi.
Qizil chegara
Yashil chegara
Ko‘k chegara
Kulrang chegara
Qora chegara
Misol
<div class="w3-panel w3-border w3-border-red">Red border</div>
<div class="w3-panel w3-border w3-border-green">Green border</div>
<div class="w3-panel w3-border w3-border-blue">Blue border</div>
<div class="w3-panel w3-border w3-border-gray">Gray border</div>
<div class="w3-panel w3-border w3-border-black">Black border</div>
O‘zingiz sinab ko‘ring »
Eslatma
Barcha W3.CSS klasslarida gray va grey ranglarini bir-birining o‘rnida ishlatish mumkin.
Hover ranglari
W3.CSS sichqoncha ko‘rsatkichi element ustiga olib borilganda ranglarni o‘zgartira oladi.
w3-hover-color klasslari istalgan HTML elementi uchun hover holatidagi fon rangini belgilaydi:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Misol
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
O‘zingiz sinab ko‘ring »
Misol
<button class="w3-button w3-black w3-hover-red">Red</button>
<button class="w3-button w3-black w3-hover-green">Green</button>
<button class="w3-button w3-black w3-hover-blue">Blue</button>
O‘zingiz sinab ko‘ring »
Ranglarni birlashtirish
Rangli bo‘limlar yaratish uchun w3-container klassini w3-color klasslari bilan birga ishlating.
Bu jozibali foydalanuvchi interfeysi elementlarini (masalan, ma’lumot kartochkalarini) yaratishni osonlashtiradi.
Paris
Discover art, architecture, food, and history.
Misol
<div class="w3-card">
<div class="w3-container w3-indigo">
<h2>Paris</h2>
</div>
<div class="w3-container">
<p>Discover art, architecture, food, and history.</p>
<button class="w3-button w3-indigo w3-hover-black">Explore Paris</button>
</div>
</div>
O‘zingiz sinab ko‘ring »
Rang klasslari
W3.CSS oldindan belgilangan ranglarning keng to‘plamini o‘z ichiga oladi.
Standart rang klasslari oq yoki qora matn bilan yaxshi uyg‘unlashadigan qilib yaratilgan.
Och (pale) ranglar
W3.CSS qizil, sariq, yashil va ko‘k ranglarning och (pale) variantlarini ham taqdim etadi.
Misollar
<div class="w3-container w3-pale-red">Pale Red</div>
<div class="w3-container w3-pale-yellow">Pale Yellow</div>
<div class="w3-container w3-pale-green">Pale Green</div>
<div class="w3-container w3-pale-blue">Pale Blue</div>
O‘zingiz sinab ko‘ring »
Rang yordamida yaratish
Ranglar ma’noni yetkazishga va kontentni tartibga solishga yordam berganda eng foydali bo‘ladi.
Quyida ranglar HTML tuzilmasini o‘zgartirmasdan holatni qanday ifodalashi mumkinligiga misol keltirilgan.
Muvaffaqiyat
O‘zgarishlaringiz saqlandi.
Ogohlantirish
Iltimos, ma’lumotlaringizni tekshiring.
Xato
Nimadir xato ketdi.
Maxsus ranglar
Boshqa W3.CSS ranglari
W3.CSS qo‘shimcha rang kutubxonalari, rang mavzulari (themes) va rang vositalarini ham o‘z ichiga oladi.
Rang mavzulari Rang kutubxonalari Rang generatori
Fonlar:
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Misol
<div class="w3-container w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-container w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-container w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
O‘zingiz sinab ko‘ring »
Kartochkalar:
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels. (Wikipedia)
Tugmalar:
Jadvallar:
| Name | Points |
|---|---|
| Jill Smith | 50 |
| Eve Jackson | 94 |
| Adam Johnson | 67 |
Rang kutubxonalari
Standart W3.CSS ranglaridan tashqari, W3.CSS ko‘plab turli rang kutubxonalaridagi ranglardan ham foydalana oladi:
Windows ranglari:
Windows ranglari haqida batafsil ma’lumot olish uchun shu yerni bosing
Moda ranglari:
Yellow
Spruce
Peony
Port
Moda ranglari haqida batafsil ma’lumot olish uchun shu yerni bosing
Avtomagistral ranglari:
Rang kutubxonalari haqida batafsil ma’lumot olish uchun shu yerni bosing
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!