Bu modulda sahifani bezash o’rganildi: fon xossalari, rasm uslublari, gradient, filter va formalarga pardoz.

Background

Fon — bir oila xossa:

.hero {
  background-color: #0a1411;
  background-image: url("tog.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Natija: blok to’liq rasm bilan qoplanadi; rasm markazlangan, takrorlanmaydi, blok o’lchamiga moslab kesiladi.

background-sizening ikki muhim qiymati: cover — blokni to’liq qoplaydi (chetlari kesilishi mumkin), contain — rasm to’liq sig’adi (bo’sh joy qolishi mumkin). Rasm yuklanmay qolganda matn o’qilishi uchun background-colorni doim birga yozing.

Besh qatorli yozuvni bitta shorthand'ga yig’ish mumkin:

.hero {
  background: #0a1411 url("tog.jpg") no-repeat center / cover;
}

Natija: yuqoridagi bilan bir xil — rang, rasm, takrorlanish, joylashuv va o’lcham (/ belgisidan keyin) bir qatorda.

Tipik xato. Shorthand'da o’lchamni /siz yozish — center cover ishlamaydi, center / cover bo’lishi shart. Shorthand chalkashtirsa, xossalarni alohida-alohida yozing: bu ham to’g’ri, ham o’qilishi osonroq.

Rasmlarni uslublash

.avatar {
  width: 120px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

Natija: kvadrat rasm doiraga aylanadi, ostida yumshoq soya.

border-radius burchaklarni yumaloqlaydi (8px — karta, 50% — doira). box-shadow qiymatlari tartibi: x-siljish, y-siljish, xiralik, rang.

Tipik xato. border-radius: 50% doira o’rniga ellips berdi — demak rasm kvadrat emas. width va height teng bo’lsagina doira chiqadi.

Yana bir klassik jumboq: rasm ostida qayerdandir kelgan mayda bo’shliq. Sabab — <img> inline element bo’lib, matn qatoridagi "harf dumchasi" uchun joy qoldiradi. Davosi:

img {
  display: block;
  max-width: 100%;
}

max-width: 100% esa rasm o’z konteyneridan toshib ketmasligini kafolatlaydi — responsive sahifaning majburiy qoidasi (keyingi modulda ko’p asqotadi).

Gradient va filterlar

Gradient — ranglar orasidagi silliq o’tish; u rasm hisoblanadi va background-imagega yoziladi:

.banner {
  background-image: linear-gradient(to right, #10b981, #0a1411);
}

Natija: chapdan o’ngga yashildan qora-yashilga silliq o’tuvchi fon.

Yo’nalish to right kabi so’z bilan ham, 45deg kabi burchak bilan ham beriladi; ranglar ikkitadan ko’p bo’lsa, oraliq to’xtash nuqtalari qo’shiladi: linear-gradient(to right, red, orange, gold). radial-gradient markazdan atrofga tarqaladi — yumshoq "nur" effektlari uchun.

filter esa tayyor effektlar to’plami:

img:hover {
  filter: brightness(1.2);
}

Natija: sichqoncha rasm ustiga kelganda u biroz yorishadi.

Ko’p ishlatiladigan filterlar: grayscale() (oq-qora), blur() (xiralashtirish), brightness() (yorqinlik), contrast(). Filter rasmga ham, istalgan boshqa elementga ham qo’llanadi.

Formalarga style berish

Brauzerning standart forma ko’rinishi har joyda har xil; uslub berib bir xillashtiriladi:

input, textarea {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: inherit;
}

input:focus {
  border-color: #10b981;
  outline: none;
}

button {
  background-color: #10b981;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

Natija: bir xil ko’rinishdagi ozoda maydonlar; tanlangan maydon chegarasi yashil tusga kiradi; tugma ustida kursor "qo’l"ga aylanadi.

Ikki nozik jihat: forma elementlari sahifa shriftini avtomatik olmaydi — font-family: inherit yozilishi kerak; outline: none qilsangiz, o’rniga :focusda boshqa ko’rinadigan belgi (masalan chegara rangi) berish shart — aks holda klaviatura bilan yurgan foydalanuvchi qayerdaligini ko’rmay qoladi.

Amaliyot

1. Sahifaga to’liq ekranli "hero" blok yasang: fon rasmi cover, ustida oq sarlavha.
2. O’z suratingizni yumaloq avatar qilib, soya bering.
3. Tugmaga gradient fon va :hoverda brightness filter qo’shing.
4. HTML kursida yasagan aloqa formangizni to’liq uslublang: maydonlar, focus holati, tugma.

Modul testini ishlang — keyingi modul o’lchov birliklari va responsive dizaynga bag’ishlanadi.