CSS gradientlar: linear-gradient, radial-gradient va conic-gradient

Qisqacha: Gradient — ranglari silliq o'tib boradigan rasm, uni CSS fayl yuklamasdan o'zi chizadi. U rasm bo'lgani uchun background-image (yoki background) ga yoziladi, background-color ga emas. linear-gradient(to right, A, B) — to'g'ri chiziq bo'ylab, radial-gradient() — markazdan tashqariga, conic-gradient() — markaz atrofida aylana bo'ylab. Ikki rang bir xil joyda (A 50%, B 50%) bo'lsa, silliq o'tish o'rniga keskin chegara chiqadi — chiziq, naqsh va doiraviy diagramma shunday chiziladi.

Bu darsda

• Chiziqli gradientni yo'nalish, burchak va to'xtash nuqtalari bilan yozasiz.
• Keskin chegara bilan chiziqlar, repeating-* bilan naqshlar chizasiz.
• Radial gradient bilan yorug' dog' va konusli gradient bilan doiraviy diagramma yasaysiz.
• in oklch bilan gradient o'rtasidagi "o'lik kulrang"dan qutulasiz va eski brauzer uchun zaxira yozasiz.
• Yumaloq burchakli gradient chegara yasaysiz.

Oldin bilishingiz kerak: Fonlar, Ranglar 2: oklch, Ranglar 3: color-mix, CSS o'zgaruvchilari 2.

1. Nega bu kerak?

Fonlar darsida naqsh va piyolani SVG fayllardan oldik. Jasur akaning yangi istaklari esa boshqacha: aksiya banneri yashildan qaymoqqa silliq o'tsin, tugagan taom kartasi qiya chiziqlar bilan "yopilsin", bugungi savdo esa doiraviy diagrammada ko'rinsin. Har biri uchun rasm chizib, fayl qilib yuklash mumkin. Lekin CSS buni o'zi chiza oladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .aksiya {
    padding: 1rem;
    color: var(--rang-fon);
    background-image: linear-gradient(
      to right, var(--rang-asosiy), var(--rang-urgu));
  }
  .tugadi {
    padding: 1rem;
    background-image: repeating-linear-gradient(
      -45deg, #e8e2d6 0 10px, var(--rang-fon) 0 20px);
  }
  .diagramma {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-image: conic-gradient(
      var(--rang-asosiy) 0 45%, var(--rang-urgu) 0 70%,
      #5b6660 0 90%, #e8b04a 0);
  }
</style>
<p class="aksiya">Bugun ko'k choy — 5 000 so'm!</p>
<p class="tugadi">Norin — bugun tugadi</p>
<div class="diagramma" role="img"
     aria-label="Savdo: osh 45%, lag'mon 25%, manti 20%, choy 10%">
</div>

Nimaga qarang: uchala bezakda ham rasm fayli yo'q. Banner yashildan qizg'ishga silliq o'tadi. "Tugadi" kartasi qiya chiziqlar bilan "yopilgan". Doira to'rt bo'lakka bo'lingan. Uchalasi ham background-image da yozilgan gradientlar.

Gradientning afzalliklari: fayl yuklanmaydi (so'rov yo'q), har qanday o'lchamda tiniq, ranglari esa CSS o'zgaruvchilaridan keladi. Brend rangi o'zgarsa, banner ham o'zi yangilanadi.

2. linear-gradient — chiziqli gradient

2.1 Gradient — bu rasm

Gradient — bir rangdan ikkinchisiga silliq o'tadigan rasm. CSS'da u rang emas, rasm turiga kiradi — url() bilan bir qatorda. Shuning uchun u background-image yoki background ga yoziladi:

.aksiya {
  background-image: linear-gradient(#2f6b3a, #fffaf0);
}

Yo'nalish yozilmasa, gradient tepadan pastga ketadi: tepada birinchi rang, pastda — oxirgisi. Bitta muhim tuzoq: background-color: linear-gradient(...) — Chrome'da tekshirdik, deklaratsiya butunlay tashlandi. Rang xususiyati rasmni qabul qilmaydi.

Gradient rasm bo'lgani uchun Fonlar darsidagi hamma narsa unga ham tegishli: background-size, background-repeat, qatlamlar, qisqa yozuv tuzog'i.

2.2 Yo'nalish va burchak

Yo'nalishni ikki xil yozish mumkin:

• Kalit so'z bilan: to right (o'ngga), to top (tepaga), to bottom right (o'ng pastki burchakka).
• Burchak bilan: 90deg. 0deg — tepaga qaragan strelka, soat mili bo'yicha ortadi: 90deg — o'ngga, 180deg — pastga (standart), 270deg — chapga.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  p {
    width: 240px;
    height: 60px;
    margin: 0 0 8px;
    padding: 4px;
  }
</style>
<p style="background-image: linear-gradient(
  var(--rang-asosiy), var(--rang-fon))">standart (pastga)</p>
<p style="background-image: linear-gradient(to right,
  var(--rang-asosiy), var(--rang-fon))">to right</p>
<p style="background-image: linear-gradient(135deg,
  var(--rang-asosiy) 50%, var(--rang-fon) 50%)">135deg</p>
<p style="background-image: linear-gradient(to bottom right,
  var(--rang-asosiy) 50%, var(--rang-fon) 50%)">to bottom right</p>

Nimaga qarang: birinchi ikkitasi — silliq o'tish, pastga va o'ngga. Oxirgi ikkitasida ranglar ataylab yarmida keskin kesilgan — yo'nalish aniq ko'rinsin deb. Bu hiylani sal pastda, "Keskin chegara" bo'limida tushuntiramiz.

Uchinchi qutida (135deg) chegara roppa-rosa 45 gradusli qiya. To'rtinchisida (to bottom right) esa chegara qutining bir burchagidan qarshi burchagiga boradi. Kvadratda ikkalasi bir xil bo'lardi, cho'ziq qutida esa farq qiladi. Sababi: kalit so'z qutining shakliga moslashadi, burchak esa moslashmaydi.

2.3 Rang to'xtash nuqtalari

Rang to'xtash nuqtasi (color stop) — gradient chizig'idagi "shu joyda aynan shu rang" degan belgi. Joyi yozilmasa, ranglar teng taqsimlanadi: ikki rangda — 0% va 100%, uch rangda — 0%, 50%, 100%. Joyni o'zingiz berishingiz mumkin:

background-image: linear-gradient(
  to right,
  #2f6b3a 0%,
  #2f6b3a 30%,
  #fffaf0 100%
);

0 dan 30% gacha — yaxlit yashil, keyin 30% dan 100% gacha qaymoqqa o'tish. Birinchi ikki qatorni qisqaroq yozish ham mumkin: #2f6b3a 0% 30% — bitta rang, ikki joy. Joylar foizda ham, px yoki rem da ham beriladi.

2.4 Keskin chegara (hard stop)

Qo'shni ikki to'xtash nuqtasi bir xil joyda bo'lsa, ular orasida o'tish uchun joy qolmaydi — rang keskin almashadi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .band {
    width: 280px;
    height: 24px;
    margin: 4px 0 16px;
    border: 1px solid var(--rang-asosiy);
    background-image: linear-gradient(to right,
      var(--rang-asosiy) 70%, #e8f1ec 70%);
  }
</style>
<p>Bugun band: 14 stoldan 10 tasi (70%)</p>
<div class="band"></div>

Nimaga qarang: yo'lakning 70 foizi yaxlit yashil, qolgani och yashil, orasida xira o'tish yo'q. Foizni o'zgartirib ko'ring — chegara siljiydi. Ma'lumot matnning o'zida ham yozilgan: yo'lak — faqat bezak, ekran o'quvchi uni o'qimaydi.

Kichik hiyla: keyingi nuqtaning joyi oldingisidan kichik bo'lsa, brauzer uni oldingisiga tenglaydi. Shuning uchun var(--rang-asosiy) 70%, #e8f1ec 0 ham aynan shu natijani beradi. 0 — "oldingisi qayerda tugagan bo'lsa, o'sha yerdan". Bu yozuv qulay: joyni faqat bir marta yozasiz, uni o'zgartirganda ikkinchi raqamni unutmaysiz.

2.5 repeating-linear-gradient — naqsh

repeating-linear-gradient oxirgi to'xtash nuqtasigacha bo'lgan qismni cheksiz takrorlaydi. Keskin chegaralar bilan birga u chiziqli naqsh chizadi:

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    width: 240px;
    padding: 4px 12px;
    border: 1px solid #c9d6cf;
    border-radius: 8px;
  }
  .tugadi {
    color: var(--rang-matn);
    background-image: repeating-linear-gradient(
      -45deg,
      #e8e2d6 0 10px,
      var(--rang-fon) 0 20px
    );
  }
</style>
<article class="taom-karta tugadi">
  <h3>Norin</h3>
  <p>Bugun tugadi — ertaga keling</p>
</article>

Nimaga qarang: karta ustida qiya, bir xil enli chiziqlar. Naqsh bitta "bo'lak"dan iborat: 0 dan 10 pikselgacha kulrang-qum rang, 10 dan 20 gacha qaymoq. Brauzer shu 20 piksellik bo'lakni chiziq bo'ylab takrorlaydi. Chiziqlar och va past kontrastli — matn ular ustida o'qilishi kerak.

class="tugadi" — faqat shu misol uchun nom, «Bahor» ro'yxatiga kirmaydi.

Tekshirib ko'ring: linear-gradient(to right, red 25%, blue 25% 50%, green 50%) — quti necha bo'lakka bo'linadi va har biri qanday?

3. radial-gradient — markazdan tashqariga

3.1 Shakl, o'lcham va joy

radial-gradient ranglarni bir nuqtadan hamma tomonga tarqatadi — suvga tosh tashlaganda yoyiladigan to'lqinlar kabi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  p {
    display: inline-block;
    width: 150px;
    height: 90px;
    margin: 4px;
    padding: 4px;
  }
</style>
<p style="background-image: radial-gradient(
  var(--rang-fon), var(--rang-asosiy))">standart</p>
<p style="background-image: radial-gradient(circle at top left,
  var(--rang-fon), var(--rang-asosiy))">circle at top left</p>
<p style="background-image: radial-gradient(circle closest-side,
  var(--rang-fon) 60%, var(--rang-asosiy) 0)">closest-side</p>

Nimaga qarang: birinchisida qaymoq markaz qutining shakliga mos cho'zilgan ellips bo'lib yoyilgan. Ikkinchisida doira chap-yuqori burchakdan tarqalgan. Uchinchisida keskin chegarali doira: uning radiusi markazdan eng yaqin chetgacha.

Qismlar:

• Shakl: ellipse (standart) yoki circle.
• O'lcham: closest-side (eng yaqin chetgacha), farthest-corner (eng uzoq burchakkacha, standart) yoki aniq radius: circle 80px.
• Joy: at so'zidan keyin, background-position kabi: at top left, at 30% 40%.

3.2 Sichqoncha ortidan yuradigan yorug' dog'

CSS o'zgaruvchilari 2 darsida JavaScript sichqoncha joyini --x va --y ga yozdi. "Bu sonlar bilan nima qilishni CSS hal qiladi" degan edik. Mana CSS tomoni:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
    --x: 90;
    --y: 40;
  }
  .taom-karta {
    width: 240px;
    padding: 8px 16px;
    border-radius: 12px;
    color: var(--rang-fon);
    background-color: var(--rang-asosiy);
    background-image: radial-gradient(
      circle 90px at calc(var(--x) * 1px) calc(var(--y) * 1px),
      rgb(255 255 255 / 0.3),
      transparent
    );
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>Toshkent oshi, bedana tuxumi bilan</p>
</article>

Nimaga qarang: yashil karta ustida yumshoq oq dog' — chapdan 90, tepadan 40 piksel nuqtada. "Tahrirlab ko'rish" bilan --x ni 200 ga o'zgartiring — dog' o'ngga ko'chadi. O'sha darsdagi skript --x va --y ni har harakatda yangilasa, dog' sichqoncha ortidan yuradi. Aniqrog'i, u yerdagi sonlar butun oynaga nisbatan edi — kartaga nisbatan hisoblashni 09-qismda, sahifani JavaScript bilan boshqarishni o'rganganda qilasiz.

Gradient — fon rangi ustidagi qatlam (Fonlar). Dog' shaffof oqdan to'liq shaffofga o'tadi, ostidan yashil ko'rinib turadi.

4. conic-gradient — aylana bo'ylab

4.1 Doiraviy diagramma

conic-gradient ranglarni markaz atrofida, soat mili bo'yicha aylantirib chiqadi — tepadan (0 gradusdan) boshlab. To'xtash nuqtalari foiz yoki gradusda. Keskin chegaralar bilan u tayyor doiraviy diagramma (pie chart) chizadi.

«Bahor»ning bugungi savdosi, masalan (sonlar o'ylab topilgan): osh — 45%, lag'mon — 25%, manti — 20%, choy — 10%:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
    --rang-fon: #fffaf0;
  }
  body {
    background-color: var(--rang-fon);
  }
  .diagramma {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-image: conic-gradient(
      var(--rang-asosiy) 0 45%,
      var(--rang-urgu) 0 70%,
      var(--rang-ikkinchi) 0 90%,
      #e8b04a 0
    );
  }
  .halqa {
    background-image:
      radial-gradient(closest-side, var(--rang-fon) 60%,
        transparent 0),
      conic-gradient(
        var(--rang-asosiy) 0 45%,
        var(--rang-urgu) 0 70%,
        var(--rang-ikkinchi) 0 90%,
        #e8b04a 0
      );
  }
</style>
<figure>
  <div class="diagramma" aria-hidden="true"></div>
  <figcaption>Osh 45%, lag'mon 25%, manti 20%, choy 10%
  </figcaption>
</figure>
<figure>
  <div class="diagramma halqa" aria-hidden="true"></div>
  <figcaption>Xuddi shu — "halqa" ko'rinishida</figcaption>
</figure>

Nimaga qarang: birinchi doira to'rt bo'lakka bo'lingan. Yashil bo'lak tepadan boshlanib, soat mili bo'yicha deyarli yarim doirani egallaydi. Ikkinchisi — o'rtasi bo'sh "halqa" (donut).

Qanday ishlaydi:

• var(--rang-asosiy) 0 45% — yashil 0 dan 45% gacha.
• var(--rang-urgu) 0 70% — 0 hiylasi (keskin chegara bo'limidan): qizg'ish oldingi rang tugagan joydan, 45% dan boshlanadi va 70% gacha davom etadi. Har rangga faqat tugash nuqtasini yozasiz — yig'indi foizlar: 45, 45 + 25 = 70, 70 + 20 = 90.
• #e8b04a 0 — sariq 90% dan oxirigacha.
• Halqa — ikki qatlam (Fonlar). Ustida — markazda qaymoq doira (radial gradient, radiusning 60 foizi), ostida — o'sha diagramma.
• Sariq #e8b04a — palitrada yo'q, faqat diagramma uchun. Bo'laklarni ajratish uchun to'rtinchi rang kerak edi.

from va at ham bor: conic-gradient(from 90deg at 30% 50%, ...) — boshlanish burchagi va markaz joyi.

4.2 Diagramma ekran o'quvchiga ko'rinmaydi

Gradient — bezak rasm. Malika ishlatadigan ekran o'quvchi uni umuman "ko'rmaydi". Windows'dagi majburiy ranglar rejimida (Chegara va soyalar darsida ko'rgan edik) esa MDN'ga ko'ra url() siz fon rasmlari — demak gradientlar ham — butunlay o'chiriladi. Shuning uchun diagrammadagi ma'lumot doim matnda ham bo'lishi kerak.

Yuqorida sonlar figcaption da yozilgan. Diagramma esa aria-hidden="true" bilan "ekran o'quvchi uchun yo'q" deb belgilangan — bir ma'lumot ikki marta o'qilmasin. Dars boshidagi birinchi misolda boshqa yo'l ishlatilgan: role="img" va aria-label (ARIA asoslari).

4.3 repeating-conic-gradient — shaxmat taxtasi

.shaxmat {
  background:
    repeating-conic-gradient(#ddd 0 25%, white 0 50%)
    0 0 / 20px 20px;
}

Bitta 20×20 kafelda konusli gradient to'rt chorakni navbatma-navbat kulrang va oq qiladi. Kafel takrorlanib, shaxmat taxtasi hosil bo'ladi. Grafik muharrirlarda shaffof joy aynan shunday ko'rsatiladi.

Tekshirib ko'ring: Diagramma: choy 50%, osh 30%, somsa 20%. conic-gradient(A 0 , B 0 , C 0) — bo'sh joylarga nima yoziladi?

5. in oklch — o'rtadagi ranglar qayerdan keladi

5.1 "O'lik kulrang"

Ranglar 3 darsida color-mix() da ko'k va sariqni srgb da aralashtirganda xira kulrang chiqqan edi. Gradient ham ikki rang orasidagi har nuqtada aralashtiradi — xuddi color-mix() kabi. Standart holatda u srgb fazosida ishlaydi. Natijada ba'zi juftliklar o'rtasida kulrang "o'lik zona" paydo bo'ladi:

<style>
  p {
    width: 280px;
    height: 36px;
    margin: 0 0 8px;
    padding: 4px;
  }
  .srgb {
    background-image: linear-gradient(to right, blue, yellow);
  }
  .oklab {
    background-image: linear-gradient(
      to right in oklab, blue, yellow);
  }
  .oklch {
    background-image: linear-gradient(
      to right in oklch, blue, yellow);
  }
</style>
<p class="srgb">standart (srgb)</p>
<p class="oklab">in oklab</p>
<p class="oklch">in oklch</p>

Nimaga qarang: birinchi yo'lak o'rtasida xira kulrang dog' bor. Chrome'da o'rtadagi pikselni o'lchadik: #7f7f7f — sof kulrang. in oklab da o'rtasi och havorang (#6cabc6), in oklch da — yorqin moviy-yashil (#00cfbc). Uchala yo'lakning ham chetlari bir xil ko'k va sariq, faqat "yo'l" boshqacha.

in qismi yo'nalishdan keyin, verguldan oldin yoziladi: to right in oklch. Yo'nalish bo'lmasa — o'zi yolg'iz: linear-gradient(in oklch, A, B). Radial va konusli gradientlarda ham shunday.

Qaysi fazo? Ranglar 3 darsidagi jadval gradientga ham tegishli. Oq, qora yoki shaffof bilan o'tishda — oklch: tus o'zgarmaydi. Ikki rangli rang orasida (masalan, yashildan qizg'ishga) — ko'pincha oklab, chunki oklch tus aylanasi bo'ylab "aylanib o'tib", kutilmagan ranglar qo'shishi mumkin. Ikki yaqin rang orasida (bir oiladagi och va to'q yashil) farq deyarli sezilmaydi — standart yetarli.

Qiziq bonus: linear-gradient(to right in oklch longer hue, red, red) — qizildan qizilgacha, lekin tus aylanasining "uzun yo'li" bo'ylab. Natija — to'liq kamalak.

5.2 Baseline va zaxira

Baseline ma'lumotiga ko'ra, gradientdagi in qismi — yangi Baseline (2024-06-11). Eski brauzerlarda ishlamaydi: ular butun deklaratsiyani tashlab yuboradi — gradient umuman chiqmaydi. VS Code bu yerda ogohlantirmaydi, shuning uchun zaxirani o'zingiz eslab qoling. Yechim — kaskad (CSS nima darsidagi "kechirimli o'qish"):

.aksiya {
  background-image: linear-gradient(to right, blue, yellow);
  background-image: linear-gradient(
    to right in oklch, blue, yellow);
}

Yangi brauzer ikkala qatorni ham tushunadi — pastdagisi yutadi. Eski brauzer ikkinchi qatorni tashlab ketadi va birinchisi qoladi: kulrang o'rtali, lekin baribir gradient.

Tekshirib ko'ring: Nega yuqoridagi zaxirada qatorlar tartibini almashtirib bo'lmaydi?

6. Gradient chegara hiylasi

"Mashhur" taom kartasining chegarasi yashildan qizg'ishga o'tsin, burchaklari esa yumaloq bo'lsin. Birinchi fikr — border-image: chegara uchun rasm beradigan xususiyat. Uni sinab ko'ramiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    width: 240px;
    margin-bottom: 12px;
    padding: 4px 16px;
    border: 4px solid transparent;
    border-radius: 12px;
  }
  .xato {
    border-image: linear-gradient(to right,
      var(--rang-asosiy), var(--rang-urgu)) 1;
  }
  .togri {
    background:
      linear-gradient(var(--rang-fon), var(--rang-fon))
        padding-box,
      linear-gradient(to right,
        var(--rang-asosiy), var(--rang-urgu)) border-box;
  }
</style>
<article class="taom-karta xato">
  <h3>❌ Osh — border-image</h3>
</article>
<article class="taom-karta togri">
  <h3>✅ Osh — ikki qatlam</h3>
</article>

Nimaga qarang: ikkala kartada ham chegara yashildan qizg'ishga o'tadi. Lekin border-image li kartaning burchaklari o'tkir — border-radius e'tiborsiz qoldi. Ikkinchisida burchaklar yumaloq.

Hiyla qanday ishlaydi — Fonlar darsidagi background-clip va qatlamlar:

1. border: 4px solid transparent — chegara joyi bor, lekin o'zi ko'rinmaydi. Undan orqadagi fon ko'rinadi.
2. Pastki qatlam — gradient, border-box gacha: chegara ostiga ham yoyiladi.
3. Ustki qatlam — bir rangli "gradient" (linear-gradient(A, A) — ikkala uchi bir xil rang), padding-box gacha kesilgan. U gradientning ichini yopadi, chegara ostidagi qismi esa ochiq qoladi.

Nega ustki qatlam oddiy rang emas? Rang faqat oxirgi qatlamda bo'lishi mumkin va u o'z clip ini alohida olmaydi. Bir rangli gradient esa rasm — unga o'z padding-box ini berish mumkin.

Bu hiyla majburiy ranglar rejimida ham xavfsiz: gradientlar o'chadi, lekin chegara rangi tizim rangiga almashtirilib, oddiy chegara bo'lib ko'rinadi.

7. Ko'p uchraydigan xatolar

7.1 background-color ga gradient

background-color: linear-gradient(...) — tashlanadi. Tuzatish: background-image yoki background.

7.2 Qisqa sahifada "yo'l-yo'l" fon

body ga gradient berildi, sahifa esa qisqa. Chrome'da tekshirdik: gradient ekran bo'ylab 50 piksellik yo'l-yo'l chiziqlar bo'lib takrorlandi. Sabab: fon rasmi hujjat balandligida chiziladi, u esa kontent balandligiga teng. Qolgan joyda repeat ishlaydi. Tuzatish: html { min-height: 100%; } — hujjat kamida ekran balandligida. Yoki gradientga no-repeat va ostiga mos fon rangi.

7.3 Chegara xira chiqdi

Chiziq keskin bo'lishi kerak edi, lekin xira o'tish chiqdi — qo'shni nuqtalar joyi har xil. Tuzatish: bir xil joy yoki 0 hiylasi.

7.4 to 45deg

to faqat kalit so'z bilan: to right. Burchak to siz yoziladi: 45deg. to 45deg — noto'g'ri, deklaratsiya tashlanadi.

7.5 Ma'lumot faqat gradientda

Diagramma yoki "to'ldirilish" yo'lagi — ekran o'quvchi uchun bo'sh joy. Tuzatish: sonlar matnda ham (figcaption, yonidagi yozuv).

7.6 in oklch zaxirasiz

Eski brauzerda gradient butunlay yo'qoladi. Tuzatish: tepada oddiy gradient, pastda in li.

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Burchak va kalit so'z

Bo'sh joylarni to'ldiring:

• linear-gradient(to right, ...) = linear-gradient(, ...)
• linear-gradient(to top, ...) = linear-gradient(, ...)
• Yo'nalish yozilmasa, burchak —
• Qutining yarmi yashil, yarmi qaymoq, chegara keskin, chapdan o'ngga: linear-gradient(to right, #2f6b3a 50%, #fffaf0 )

Ishora: 0deg — tepaga, soat mili bo'yicha ortadi. Keskin chegara — bir xil joy yoki 0.

2-mashq (o'rta): "Mashhur" taom kartasi

«Bahor» menyusidagi class="taom-karta mashhur" kartalari:

1. Chegara 3 piksel, yashildan qizg'ishga gradient, burchaklar 12 piksel.
2. Karta ichi qaymoq rangda.
3. Oddiy kartalar (class="taom-karta") o'zgarmasin — oddiy yashil chegarada qolsin.
4. Gradient ranglari in oklab da aralashsin — yashil va qizg'ish orasida "loyqa" jigarrang chiqmasin. Eski brauzer uchun zaxira ham yozing.

Ishora: "Gradient chegara hiylasi" bo'limidagi ikki qatlam. Ikki class'ni yopishtirish — Asosiy selektorlar. Zaxira — "Baseline va zaxira" bo'limidagi kaskad: avval oddiy, keyin in li qator.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    width: 240px;
    margin-bottom: 12px;
    padding: 4px 16px;
    border: 3px solid var(--rang-asosiy);
    border-radius: 12px;
    background-color: var(--rang-fon);
  }
  .taom-karta.mashhur {
    border-color: transparent;
    background:
      linear-gradient(var(--rang-fon), var(--rang-fon))
        padding-box,
      linear-gradient(to right,
        var(--rang-asosiy), var(--rang-urgu)) border-box;
    background:
      linear-gradient(var(--rang-fon), var(--rang-fon))
        padding-box,
      linear-gradient(to right in oklab,
        var(--rang-asosiy), var(--rang-urgu)) border-box;
  }
</style>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <p>28 000 so'm</p>
</article>
<article class="taom-karta mashhur">
  <h3>Osh</h3>
  <p>35 000 so'm</p>
</article>

3-mashq (qiyin): O'zgaruvchili diagramma

Diagramma ulushlari CSS o'zgaruvchilarida bo'lsin, shunda ertaga sonlarni bitta joyda o'zgartirasiz:

.diagramma {
  --osh: 45%;
  --lagmon: 25%;
  --manti: 20%;
}

1. conic-gradient ni shu uch o'zgaruvchi bilan yozing — yig'indi foizlarni qo'lda hisoblamang.
2. O'rtasi bo'sh halqa bo'lsin.
3. Sonlar ekran o'quvchiga matnda yetib borsin.

Ishora: yig'indi — calc(var(--osh) + var(--lagmon)) (Matematik funksiyalar). Choy ulushi — "qolgani", uni yozish shart emas. Halqa — doiraviy diagramma misolidagi radial qatlam.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
    --rang-fon: #fffaf0;
  }
  body {
    background-color: var(--rang-fon);
  }
  .diagramma {
    --osh: 45%;
    --lagmon: 25%;
    --manti: 20%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-image:
      radial-gradient(closest-side, var(--rang-fon) 60%,
        transparent 0),
      conic-gradient(
        var(--rang-asosiy) 0 var(--osh),
        var(--rang-urgu) 0 calc(var(--osh) + var(--lagmon)),
        var(--rang-ikkinchi) 0
          calc(var(--osh) + var(--lagmon) + var(--manti)),
        #e8b04a 0
      );
  }
</style>
<figure>
  <div class="diagramma" aria-hidden="true"></div>
  <figcaption>Bugungi savdo: osh 45%, lag'mon 25%,
  manti 20%, choy 10%</figcaption>
</figure>

4-mashq: Portfolio qadami — tepadan yumshoq yorug'lik

Portfolioning body si bir rangli fonda. Sahifa tepasiga ko'zga zo'rg'a ilinadigan yorug'lik qo'shamiz: tepada och fon rangi, 24rem pastda — oddiy fon.

1. body ning fon rangini saqlagan holda, ustiga yuqoridan pastga gradient qo'shing: --rang-fon-och dan --rang-fon ga, 24rem da tugasin.
2. Gradient takrorlanmasin — qisqa sahifada ham (404.html) yo'l-yo'l chiziq chiqmasin.
3. Sarlavha va matn kontrastini tekshiring: eng och joyda ham 4.5:1 dan yuqori bo'lsin.
4. in oklch kerakmi? Qaror qiling va sababini yozing.

Ishora: qisqa yozuv rangni o'chiradi (Fonlar — rangni qatlam oxiriga yozing). Kontrast raqamlarini Ranglar 3 darsida hisoblagan edingiz.

body {
  font-family: system-ui, sans-serif;
  color: var(--rang-matn);
  background:
    linear-gradient(var(--rang-fon-och), var(--rang-fon) 24rem)
      no-repeat var(--rang-fon);
}

9. Real ishda

• Tugmalar va bannerlar — yengil linear-gradient bilan "hajm". Ko'p dizayn tizimlari endi in oklch ishlatadi — o'rtadagi ranglar tiniq chiqadi.
• Skelet yuklash — kontent kelguncha kulrang bloklar ustida yuradigan yorug' chiziq ham gradient (Micro-interaktsiyalar va skeletonlar).
• Naqshlar — chiziq, katak, nuqta: rasm faylsiz, bir necha qator CSS. Masalan, grafik muharrirlardagi shaffoflik katakchasi.
• Diagrammalar — oddiy ulush diagrammasi uchun kutubxona shart emas, conic-gradient yetadi. Murakkab grafiklar esa JavaScript kutubxonalari bilan chiziladi — kursda alohida o'rganamiz.
• Intervyuda so'raladi: "Keskin chegarali gradient qanday yoziladi?", "Gradientni yumaloq chegaraga qanday berasiz?", "in oklch nima o'zgartiradi?".

Xulosa

• Gradient — rasm: background-image yoki background ga yoziladi, background-color ga emas.
• linear-gradient — yo'nalish (to right) yoki burchak (90deg, 0deg — tepaga); radial-gradient — shakl, o'lcham, at joy; conic-gradient — tepadan soat mili bo'yicha.
• To'xtash nuqtalari o'tish joyini beradi; bir xil joy (yoki 0) — keskin chegara; repeating-* — naqsh.
• Doiraviy diagramma — conic-gradient + tugash nuqtalari; ma'lumot doim matnda ham bo'lsin.
• in oklch/in oklab — o'rtadagi ranglar tiniq; yangi Baseline, tepada oddiy gradientli zaxira.
• Yumaloq gradient chegara — shaffof border + padding-box va border-box qatlamlari.

Keyingi dars: Rasm va media elementlarini stillash — img va video ni sahifaga moslash, object-fit, aspect-ratio va rasm ostidagi sirli bo'shliq.

Manbalar

• MDN: "Using CSS gradients", "linear-gradient()", "radial-gradient()", "conic-gradient()", "", "border-image" — developer.mozilla.org
• W3C: "CSS Images Module Level 3" va "Level 4" (conic, interpolation) — w3.org/TR/css-images-4
• web-features (Baseline ma'lumotlari): "gradients", "conic-gradients", "gradient-interpolation" — github.com/web-platform-dx/web-features