CSS

Ranglar, shrift va bezaklar

Endi saytimizni chiroyli qilishga o'tamiz. Bu darsda ranglar, shriftlar va vizual bezaklar (yumaloq burchaklar, soyalar, silliq o'tishlar) bilan tanishamiz. Aynan shu detallar saytni oddiy va professional ko'rinishlar orasidagi farqni belgilaydi. Ularni o'zlashtirsangiz, har qanday dizaynni hayotga tatbiq eta olasiz.

Bu dars — asosan ko'rinish haqida. Har bir xossani o'z kompyuteringizda sinab ko'ring: qiymatlarni o'zgartirib, brauzerdagi natijaga qarang. Rang, shrift va soyalar bilan "o'ynash" — CSS'ni his qilishning eng yaxshi usuli.

Ranglar: color va background

color — matn rangini, background-color — elementning fon rangini belgilaydi. Bu ikkisi — eng ko'p ishlatiladigan CSS xossalari:

.ogohlantirish {
  color: white;
  background-color: red;
}

Rang formatlari

CSS'da rangni bir necha usulda yozish mumkin. Ularning barchasi bir xil rangni bera oladi, lekin har birining o'z qulayligi bor:

1. Nom bo'yicha (nomli ranglar)

Eng oddiy usul — rangning inglizcha nomini yozish. CSS'da ~140 ta nomli rang bor. Tez sinash uchun qulay, lekin cheklangan:

color: tomato;   /* red, blue, green, black, white, gray... */

2. HEX (o'n oltilik kod)

Panjara belgisidan (#) keyin 6 ta belgi: har juftlik qizil, yashil, ko'k (RGB) miqdorini bildiradi. Eng ko'p ishlatiladigan format. Dizaynerlar odatda ranglarni aynan HEX kodida beradi:

color: #ff0000;   /* sof qizil */
color: #ffffff;   /* oq */
color: #000000;   /* qora */
color: #3498db;   /* ko'k */
color: #333;      /* qisqa yozuv = #333333 */

3. RGB va RGBA

rgb(qizil, yashil, ko'k) — har biri 0'dan 255'gacha. rgba() qo'shimcha shaffoflik (alpha, 0'dan 1'gacha) qiymatini oladi. Shaffof rang kerak bo'lganda RGBA juda foydali:

color: rgb(52, 152, 219);        /* ko'k */
background: rgba(0, 0, 0, 0.5);  /* 50% shaffof qora */

4. HSL va HSLA

hsl(rang, to'yinganlik, yorug'lik) — Hue (rang chizig'i, 0-360 daraja), Saturation (to'yinganlik, %) va Lightness (yorug'lik, %). Bu format inson uchun eng tushunarli: bitta rangni ochroq/to'qroq qilish uchun faqat yorug'likni o'zgartirasiz:

color: hsl(204, 70%, 53%);   /* ko'k */
color: hsl(204, 70%, 30%);   /* to'qroq ko'k (yorug'lik kam) */
color: hsl(204, 70%, 75%);   /* ochroq ko'k (yorug'lik ko'p) */
Boshlang'ich uchun HEX yetarli va universal. Lekin rang gammasini (ochdan to'qgacha) yaratishda HSL ancha qulay, chunki faqat yorug'lik foizini o'zgartirib bir xil rangning turli soyalarini olasiz.

background — kengroq imkoniyatlar

background nafaqat rang, balki rasm va gradient (rang o'tishi) ham bo'lishi mumkin:

/* Rang */
.blok { background-color: #f0f0f0; }

/* Rasm */
.hero {
  background-image: url('rasm.jpg');
  background-size: cover;      /* butun blokni qoplaydi */
  background-position: center; /* markazga tekislaydi */
}

/* Gradient (rang o'tishi) */
.tugma {
  background: linear-gradient(to right, #3498db, #2ecc71);
}

Shriftlar: font-family

font-family matn shriftini belgilaydi. Unga bir necha shrift ro'yxat sifatida beriladi: brauzer birinchisini topolmasa, keyingisiga o'tadi. Oxirida umumiy "zaxira" oila (sans-serif yoki serif) yoziladi:

body {
  font-family: Arial, Helvetica, sans-serif;
}

code {
  font-family: "Courier New", monospace;
}
Zamonaviy saytlar ko'pincha Google Fonts kabi tashqi shriftlarni ulaydi. Buning uchun HTML'ning <head> qismiga <link> qo'shib, so'ng CSS'da font-familyda o'sha shrift nomini yozasiz.

font-size, font-weight, line-height

Shriftning boshqa muhim xossalari:

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;    /* shrift o'lchamining 1.6 baravari */
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
}
line-heightni birliksiz raqam (masalan 1.6) bilan bering — bu shrift o'lchamiga nisbatan hisoblanadi va eng moslashuvchan. Uzun matnlar uchun 1.5-1.7 oralig'i o'qishni ancha qulaylashtiradi — bu kichik detal, katta farq qiladi.

Matn bezaklari

Matnni tekislash va bezash xossalari:

h1 {
  text-align: center;        /* left, right, center, justify */
}

a {
  text-decoration: none;     /* havola tagidagi chiziqni olib tashlaydi */
}

.sarlavha {
  text-transform: uppercase; /* BOSH HARFLARGA aylantiradi */
  letter-spacing: 2px;       /* harflar orasi masofa */
}

border-radius — yumaloq burchaklar

border-radius element burchaklarini yumaloqlaydi. Zamonaviy dizaynda tugma va kartalar deyarli har doim yumaloq burchakli bo'ladi:

.karta {
  border-radius: 8px;      /* yengil yumaloq */
}

.tugma {
  border-radius: 25px;     /* kuchli yumaloq (kapsula) */
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;      /* to'liq doira */
}
border-radius: 50% — kvadrat elementni ideal doiraga aylantiradi. Bu profil rasmlari (avatar) uchun eng ko'p ishlatiladigan hiyla.

box-shadow — soya

box-shadow element atrofiga soya qo'shib, unga "hajm" va "chuqurlik" beradi. Sintaksisi: gorizontal vertikal yumshoqlik rang:

.karta {
  /* o'ng-past 4px, yumshoqlik 8px, shaffof qora */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Yumshoqroq, tarqoq soya */
.modal {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
Chiroyli soya siri — yumshoq va nozik bo'lishida. To'q, keskin soyalar eskicha ko'rinadi. Buning o'rniga past shaffoflik (masalan 0.1-0.2) va kattaroq yumshoqlik (blur) ishlating — natija zamonaviy va tabiiy bo'ladi.

transition — silliq o'tishlar

transition xossa qiymati o'zgarganda o'zgarishni silliq (animatsiyali) qiladi — keskin sakramaydi. Ko'pincha :hover (sichqoncha ustiga kelganda) bilan birga ishlatiladi:

.tugma {
  background-color: #3498db;
  transition: background-color 0.3s;
}

/* Sichqoncha ustiga kelganda */
.tugma:hover {
  background-color: #2980b9;
}

Bu misolda tugma ustiga kelganda rang 0.3 sekundda silliq o'zgaradi. transition bo'lmasa, rang darhol "sakrab" o'zgargan bo'lardi. Sintaksis: xossa davomiylik. Bir necha xossani birdaniga ham berish mumkin:

.karta {
  transition: transform 0.3s, box-shadow 0.3s;
}

.karta:hover {
  transform: translateY(-5px);   /* biroz yuqoriga ko'tariladi */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
transition: all yozib, barcha xossalarni animatsiyalash mumkin, lekin bundan ehtiyot bo'ling — u ba'zan kutilmagan animatsiyalarga va sekinlashishga olib keladi. Faqat kerakli xossalarni aniq sanang (masalan transition: background-color 0.3s).

Amaliy misol: chiroyli tugma

Ushbu darsda o'rgangan barcha bilimlarni birlashtirib, professional ko'rinadigan tugma yaratamiz:

.btn {
  color: white;
  background-color: #3498db;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
  transition: background-color 0.3s, transform 0.2s;
}

.btn:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
}

Xulosa