W3.CSS misollari

W3.CSS ranglari

Fon ranglari Matn ranglari Hover ranglari

W3.CSS konteynerlar

Konteynerlar Rangli konteynerlar <div> yordamida konteyner sarlavhasi <header> yordamida konteyner sarlavhasi <div> yordamida konteyner pastki qismi <footer> yordamida konteyner pastki qismi <article> va <section> konteynerlari <div> elementli konteyner Semantik elementli konteyner Konteyner ichki bo‘shlig‘i Sarlavha va paragraflardan iborat konteyner

Misollar izohi

W3.CSS chegaralari

Chegaralar Rangli chegaralar Yumaloq chegaralar Qalin chegaralar Hover effektli chegaralar

Misollar izohi

W3.CSS panellar

Panellar Panel eslatmalari Panel iqtiboslari Panel ogohlantirishlari Panel kartochkalari Yumaloq burchakli panel Panelni yashirish/yopish Panelni ko‘rsatish/ochish

Misollar izohi

W3.CSS kartochkalar

Kartochkalar Rangli kartochkalar Kartochka kontenti Fotokartochkalar Hover effektli kartochkalar Tugmali avatar kartochkasi To‘liq kenglikdagi tugmali avatar kartochkasi Kartochka vidjetlari

Misollar izohi

W3.CSS shriftlari

Sarlavhalar Shrift o‘lchami klasslari W3.CSS standart sozlamalarini qayta belgilash Sahifaning standart shriftini o‘zgartirish Shrift klassidan qanday foydalanish Tashqi shriftlardan qanday foydalanish Tashqi Google shrifti: lobster Shrift effektlari Shrift effektlari 2

Misollar izohi

W3.CSS matn

Matnni tekislash Elementlarni markazlashtirish Keng matn Matn soyasi Matn shaffofligi Matnning maxsus effektlari

Misollar izohi

W3.CSS yumaloq burchaklar

Round klasslari Circle klassi Doira ichidagi matn Doira ichidagi doira Doira ichidagi doira 2

Misollar izohi

W3.CSS ichki bo‘shliq (padding)

Ichki bo‘shliq raqamli klasslari Ichki bo‘shliq o‘lcham klasslari

Misollar izohi

W3.CSS tashqi bo‘shliq (margin)

Barcha tomonlardan tashqi bo‘shliq Yuqori tashqi bo‘shliq Pastki tashqi bo‘shliq Chap tashqi bo‘shliq O‘ng tashqi bo‘shliq Tashqi bo‘shliqli bo‘limlar

Misollar izohi

W3.CSS display klasslari

Display konteyner Ichki bo‘shliqli (padding) display konteyner Rasm uchun display konteyner Bayroqni ko‘rsatish Float klasslari Yashirish va ko‘rsatish klasslari Yashirish va ko‘rsatishni almashtirish

Misollar izohi

W3.CSS tugmalar

Tugmalar Tugma ranglari Hover ranglari Tugma shakllari Tugma o‘lchamlari Tugma chegaralari Matn effektli tugmalar Keng matn effektli tugmalar Ichki bo‘shliqli tugmalar Chap va o‘ng tugmalar To‘liq kenglikdagi tugmalar Nofaol tugmalar Bir qatordagi tugmalar guruhlari Tugmalar paneli To‘lqin (ripple) effektli tugmalar

Misollar izohi

W3.CSS eslatmalar

Eslatmalar Yumaloq chegarali kulrang eslatma Chap va o‘ng chiziqli rangpar ko‘k eslatma Chap chiziqli rangpar qizil eslatma Chegarali rangpar sariq eslatma Chegarali va pastki chiziqli rangpar yashil eslatma Yuqori va pastki chiziqli sariq eslatma

Misollar izohi

W3.CSS iqtiboslar

Iqtiboslar Katta iqtiboslar Blockquote iqtiboslar Maxsus iqtiboslar 1 Maxsus iqtiboslar 2 Maxsus iqtiboslar 3 Qora iqtibos Karta ko‘rinishidagi iqtiboslar Karta ko‘rinishidagi iqtiboslar 2

Misollar izohi

W3.CSS ogohlantirishlar

Oddiy ogohlantirishlar Yopiladigan ogohlantirishlar Yumaloq burchakli ogohlantirishlar Ogohlantirish kartalari

Misollar izohi

W3.CSS jadvallar

Misollar izohi

W3.CSS ro‘yxatlar

Misollar izohi

W3.CSS rasmlar

Yumaloq burchakli rasm Doira shaklidagi rasm Chegarali rasm Rasm kartasi Rasm ustidagi matn Moslashuvchan rasm Maksimal kengligi cheklangan moslashuvchan rasm Rasm shaffofligi Rasmning kulrang tusi (grayscale) Rasmning sepiya tusi Sichqoncha ustiga kelgandagi rasm effektlari Rasm shaffofligini o‘chirish Fotoalbom

Misollar izohi

W3.CSS kiritish maydonlari

Yuqoridagi yorliqlar Pastdagi yorliqlar Kiritish kartalari Rangli yorliqlar Chegarali kiritish maydonlari Yumaloq chegaralar Chegarasiz kiritish maydoni Rangli kiritish maydonlari Hover effektli kiritish maydonlari Animatsiyali kiritish maydonlari Checkboxlar Radio tugmalar Tanlash menyusi (select) Chegarali tanlash menyusi Uch ustunli griddagi forma elementlari Yorliqli ikki ustunli joylashuv

Misollar izohi

W3.CSS nishonlar

Nishonlar Rangli nishonlar Tugmalardagi nishonlar Ro‘yxatlardagi nishonlar I Ro‘yxatlardagi nishonlar II Jadvallardagi nishonlar Katta nishonlar UTF-8 nishonlar

Misollar izohi

W3.CSS teglar, yorliqlar va lavhalar

Teglar va yorliqlar Rangli teglar Katta teglar Harfli teglar Bir qatordagi teglar Lavha sifatidagi teg Yo‘l belgilari Katta lavhalar Katta lavhalar 2 Yumaloq burchakli lavhalar Burilgan teglar Aylanuvchi teglar

Misollar izohi

W3.CSS ikonkalar

Font Awesome ikonkalari Google Material Design ikonkalari Bootstrap ikonkalari

Misollar izohi

W3.CSS moslashuvchan dizayn

w3-half klassi w3-third klassi w3-twothird klassi w3-quarter klassi w3-threequarter klassi Ichma-ich qatorlar (w3-half ichida w3-half) w3-rest yordamidagi ustunlar Foizlar yordamidagi ustunlar w3-content klassi w3-row va w3-row-padding o‘rtasidagi farq

Misollar izohi

W3.CSS animatsiyalar

Yuqoridan animatsiya Pastdan animatsiya Chapdan animatsiya O‘ngdan animatsiya Asta paydo bo‘lish animatsiyasi Cheksiz xiralashib-yorishish animatsiyasi Kattalashish (zoom) animatsiyasi Aylanish animatsiyasi Barcha elementlarga fade effekti

Misollar izohi

W3.CSS ochiluvchi menyular

Sichqoncha ustiga kelganda ochiladigan menyu Sichqoncha ustiga kelganda ochiladigan dropdown Navigatsiya panelidagi ochiluvchi menyu Bosilganda ochiladigan menyu Rasmli ochiluvchi menyu Karta ko‘rinishidagi ochiluvchi menyu Animatsiyali ochiluvchi menyu O‘ngga tekislangan ochiluvchi menyu

Misollar izohi

W3.CSS akkordeonlar

Oddiy akkordeon Akkordeon tugmalari Faol akkordeon Akkordeon kengligi Akkordeon havolalari Ro‘yxatli akkordeon kartasi Yon paneldagi akkordeon va ochiluvchi menyu Animatsiyali akkordeon

Misollar izohi

W3.CSS navigatsiya

Oddiy navigatsiya Rangli panel Chegarali panel Paneldagi faol havola Hover effektli panel havolalari O‘ngga tekislangan havolalar Panel shrift o‘lchami (font-size) Panelning ichki bo‘shlig‘i (padding) Panel kengligi Panel ikonkalari Kiritish maydonli panel Ochiluvchi menyuli panel Faol ochiluvchi menyu va ikonkali panel Bosilganda ochiladigan menyuli panel Yuqori panel Pastki panel Yig‘iladigan panel

Misollar izohi

W3.CSS yon panel

Oddiy yon panel (doim ko‘rinib turadi) Yig‘iladigan yon panel Sahifa kontentining bir qismini yopadigan yon panel Butun sahifa kontentini yopadigan yon panel Kontentni o‘ngga suradigan yon panel Yon panel rangi Chegarali yon panel Pastki chegarali yon panel (ajratgichlar) Yon panel kartasi Hover effektli yon panel havolalari (fon rangi) Hover effektli yon panel havolalari (matn rangi) Yon panel o‘lchami Ikonkali yon panel (ikonkalar paneli) Ochiluvchi menyuli yon panel Akkordeonli yon panel Animatsiyali yon panel Ustki qatlam (overlay) effektli yon panel Kontentli yon panel

Misollar izohi

W3.CSS tablar

Oddiy tab Faol/joriy tab Vertikal tab Animatsiyali tab kontenti Tablarga ajratilgan rasmlar galereyasi Griddagi tablar

Misollar izohi

W3.CSS sahifalash

Oddiy sahifalash Sahifalash strelkalari Faol sahifalash havolasi Sahifalashning hover rangi Sahifalash o‘lchami Chegarali sahifalash Yumaloq chegarali sahifalash Markazlashtirilgan sahifalash Keyingi/oldingi sahifalash strelkalari

Misollar izohi

W3.CSS progress barlar

Oddiy progress bar Progress bar kengligi Progress bar o‘lchamlari Progress bar ranglari Yumaloq burchakli progress barlar Progress bar yorliqlari Dinamik progress bar Yorlig‘i markazda joylashgan dinamik progress bar Yorlig‘i chapga tekislangan dinamik progress bar Yorlig‘i tashqarida joylashgan dinamik progress bar

Misollar izohi

W3.CSS slayd-shou

Rasmli qo‘lda boshqariladigan slayd-shou Rasmli avtomatik slayd-shou Avtomatik HTML slaydlar Slayd-shou izohlari (captions) Raqamli va oldingi/keyingi tugmali slayd-shou indikatorlari Ikonka va nuqtali slayd-shou indikatorlari Indikator sifatidagi rasmlar Animatsiyali slaydlar Cheksiz fade effektli avtomatik slayd-shou

Misollar izohi

W3.CSS modal oyna

Oddiy modal oyna (dialog oynasi/qalqib chiquvchi oyna) Konteynerli modal oyna Karta ko‘rinishidagi modal oyna Animatsiyali modal oyna Asta paydo bo‘ladigan modal oyna Modal rasm Modal rasmlar galereyasi Modal kirish formasi Tabli modal oyna Modal oynani qanday yopish mumkin Modal lightbox (modal rasmlar galereyasi)

Misollar izohi

W3.CSS tooltiplar

Qator ichidagi tooltip matni Qator ichidagi tooltip tegi Hover effektli rasmdan oldingi tooltip matni Hover effektli rasmdan keyingi tooltip matni Absolyut joylashgan tooltip Rangli tooltip Yumaloq burchakli tooltip Kichik tooltip Katta tooltip

Misollar izohi

W3.CSS moslashuvchan grid

Egiluvchan (fluid) grid namoyishi Ikkita teng ustun Ikkita teng bo‘lmagan ustun Uchta teng ustun Uchta teng bo‘lmagan ustun Oltita teng ustun Aralash: mobil qurilmalar va noutbuklar Aralash: mobil qurilmalar, planshetlar va noutbuklar w3-row va w3-row-padding o‘rtasidagi farq w3-rest yordamidagi ustunlar Foizlar yordamidagi ustunlar

Misollar izohi

W3.CSS kod

Misollarni ko‘rsatish Kodni ko‘rsatish Rangli HTML kodni ko‘rsatish Rangli CSS kodni ko‘rsatish Rangli JavaScript kodini ko‘rsatish Qator ichidagi kodni ko‘rsatish (w3-codespan)

Misollar izohi

W3.CSS filtrlar

Jadvallarni filtrlash Ro‘yxatlarni filtrlash Ochiluvchi menyularni filtrlash (bosish orqali) Ochiluvchi menyularni filtrlash (hover orqali)

Misollar izohi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish