CSS filter va blend mode: filterlar va aralashtirish rejimlari

Qisqacha: filter elementga rasm muharriridagi effektlarni beradi: filter: grayscale(1) — oq-qora, blur(4px) — xira, drop-shadow() — shaklning o'ziga soya. backdrop-filter: blur(8px) elementning orqasidagi narsani xiralashtiradi — "shisha" effekti. Blend mode'lar (mix-blend-mode, background-blend-mode) qatlamlarni Photoshop'dagi kabi aralashtiradi, isolation: isolate esa aralashishni chegaralaydi.

Bu darsda

• filter funksiyalarini ishlatasiz va ularni zanjir qilib, tartib muhimligini tushuntira olasiz.
• drop-shadow() va box-shadow farqini bilasiz.
• backdrop-filter bilan shisha panel yasaysiz va uning kontrast xavfini tekshirasiz.
• mix-blend-mode, background-blend-mode va isolation bilan rang qatlamlarini boshqarasiz.
• Filterlar layout va tezlikka qanday ta'sir qilishini bilasiz.

Oldin bilishingiz kerak: Chegara, burchak va soyalar, Fonlar, z-index va stacking context, Rendering pipeline.

1. Nega bu kerak?

«Bahor» menyusida kechqurun ba'zi taomlar tugaydi. Gradientlar darsida taom-karta tugadi kartasiga qiya chiziqli fon bergan edik. Lekin karta rasmi hali ham rangli va "ishtaha ochadi". Mehmon uni buyurtma qilmoqchi bo'ladi, keyin ofitsiant Otabek "tugagan" deydi.

Yana ikki vazifa bor:

• Bosh sahifadagi choyxona rasmi ustiga yozuv qo'yamiz — rasm rang-barang, yozuv o'qilmayapti.
• Sahifa tepasidagi menyu paneli aylantirilganda rasm ustidan o'tadi — uni "muzli oyna" kabi qilmoqchimiz.

Ilgari bularning har biri uchun dizayner rasm muharririda alohida fayl tayyorlardi: rangli, oq-qora, xiralashtirilgan. Bitta rasm — uchta fayl. Endi CSS rasmni joyida o'zgartiradi. Telefondagi kamera ilovasining filtrlari kabi: surat bitta, "oq-qora", "yorqinroq", "iliqroq" tugmalarini bosasiz.

2. filter: element ustidagi effekt

2.1 Funksiyalar

filter — element chizilgandan keyin unga grafik effekt qo'yadigan xususiyat. Elementning hamma qismi — foni, matni, rasmi, bolalari — birga o'zgaradi. Qiymati — bir yoki bir nechta funksiya.

Rasm o'rniga gradient bilan chizilgan "manzara" olamiz: osmon, quyosh va yashil dala (Gradientlar):

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; flex-wrap: wrap; gap: 12px; }
  figure { margin: 0; font-size: 13px; text-align: center; }
  .rasm {
    width: 110px;
    height: 80px;
    border-radius: 8px;
    background:
      radial-gradient(circle at 70% 35%, #ffd54a 0 12%,
        transparent 13%),
      linear-gradient(#8fd3ff, #e8f4ff 55%, #2f6b3a 55%);
  }
  .f1 { filter: grayscale(1); }
  .f2 { filter: blur(3px); }
  .f3 { filter: brightness(0.6); }
  .f4 { filter: contrast(1.8); }
  .f5 { filter: sepia(1); }
  .f6 { filter: saturate(3); }
  .f7 { filter: hue-rotate(180deg); }
  .f8 { filter: invert(1); }
</style>
<div class="qator">
  <figure><div class="rasm"></div>asl</figure>
  <figure><div class="rasm f1"></div>grayscale(1)</figure>
  <figure><div class="rasm f2"></div>blur(3px)</figure>
  <figure><div class="rasm f3"></div>brightness(0.6)</figure>
  <figure><div class="rasm f4"></div>contrast(1.8)</figure>
  <figure><div class="rasm f5"></div>sepia(1)</figure>
  <figure><div class="rasm f6"></div>saturate(3)</figure>
  <figure><div class="rasm f7"></div>hue-rotate(180deg)</figure>
  <figure><div class="rasm f8"></div>invert(1)</figure>
</div>

Nimaga qarang: to'qqizta bir xil manzara. Oq-qora, xira, qorong'i, keskin, eski surat rangidagi, o'ta yorqin, ranglari aylantirilgan va negativ. HTML bir xil — faqat filter qiymati farq qiladi.

Sonlarni foizda ham yozsa bo'ladi: grayscale(100%) = grayscale(1). filter 2016-yildan hamma asosiy brauzerlarda bor (Baseline, keng tarqalgan).

2.2 «Bahor»: tugagan taom

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; gap: 12px; }
  .taom-karta {
    width: 150px;
    padding: 8px;
    border: 2px solid #2f6b3a;
    border-radius: 8px;
  }
  .taom-karta .rasm {
    height: 70px;
    border-radius: 6px;
    background:
      radial-gradient(circle at 50% 60%, #f2b04a 0 30%,
        #b4461a 31% 36%, transparent 37%),
      #fffaf0;
  }
  .taom-karta h3 { margin: 6px 0 2px; font-size: 16px; }
  .taom-karta p { margin: 0; }
  .taom-karta.tugadi { border-color: #5b6660; }
  .taom-karta.tugadi .rasm {
    filter: grayscale(1) opacity(0.6);
  }
</style>
<div class="qator">
  <article class="taom-karta">
    <div class="rasm"></div>
    <h3>Osh</h3>
    <p>35 000 so'm</p>
  </article>
  <article class="taom-karta tugadi">
    <div class="rasm"></div>
    <h3>Manti</h3>
    <p>Bugun tugadi</p>
  </article>
</div>

Nimaga qarang: "Manti" kartasidagi rasm oq-qora va xira, matni esa aniq o'qiladi. Filterni butun kartaga emas, faqat rasmga berdik. Aks holda matn ham xiralashib, kontrast tushib ketardi. Karta "Bugun tugadi" deb matnda ham aytadi — rang yolg'iz ma'lumot bermaydi.

2.3 Zanjir: tartib muhim

Bir nechta funksiya bo'sh joy bilan yoziladi va chapdan o'ngga navbat bilan qo'llanadi. 2D transformlar dagi kabi tartib natijani o'zgartiradi:

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; gap: 32px; padding: 16px; }
  svg { width: 72px; height: 72px; }
  .a { filter: drop-shadow(4px 4px 0 #b4461a) grayscale(1); }
  .b { filter: grayscale(1) drop-shadow(4px 4px 0 #b4461a); }
  p { font-size: 13px; }
</style>
<div class="qator">
  <div>
    <svg class="a" viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#2f6b3a" d="M12 2l3 7h7l-5.5 4.5 2 7.5L12 17
        l-6.5 4 2-7.5L2 9h7z"/>
    </svg>
    <p>soya → oq-qora</p>
  </div>
  <div>
    <svg class="b" viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#2f6b3a" d="M12 2l3 7h7l-5.5 4.5 2 7.5L12 17
        l-6.5 4 2-7.5L2 9h7z"/>
    </svg>
    <p>oq-qora → soya</p>
  </div>
</div>

Nimaga qarang: chapdagi yulduzning soyasi ham kulrang — avval soya qo'shildi, keyin hammasi oq-qora bo'ldi. O'ngdagisida yulduz kulrang, soyasi esa qizg'ish — oq-qora avval, soya keyin.

2.4 Filterni silliq o'zgartirish

filter animatsiya qilinadigan xususiyat. Transition darsidagi usul bilan hover'da rasm asta "jonlanadi":

.taom-karta img {
  transition: filter 200ms ease-out;
}

@media (hover: hover) {
  .taom-karta:hover img {
    filter: brightness(1.1);
  }
}

Brauzer 200 millisekund davomida brightness(1) dan brightness(1.1) gacha oraliq qiymatlarni chizadi. Silliqlik uchun ikkala holatdagi funksiyalar bir xil tartibda bo'lsin. Chrome'da animatsiyani o'rtasida to'xtatib tekshirdik:

• brightness(1) → brightness(1.2) grayscale(1): o'rtada brightness(1.1) grayscale(0.5). Yetishmagan grayscale "asl" qiymat (0) deb olindi — silliq.
• brightness(1) → grayscale(1): o'rtada birdaniga grayscale(1). Funksiyalar mos kelmadi — silliq o'tish o'rniga sakrash.

Qoida: boshlang'ich holatga ham kerakli funksiyalarni "asl" qiymati bilan yozing — masalan filter: grayscale(0).

prefers-reduced-motion ni ham unutmang (Harakat etikasi): yorqinlikning biroz o'zgarishi bosh aylantirmaydi, lekin blur() bilan "suzib chiqadigan" katta effekt boshqa gap. Katta effektlarni @media (prefers-reduced-motion: no-preference) ichiga oling.

Tekshirib ko'ring: Karta hover'da filter: brightness(1.1) oladi. Kechqurun tugagan kartaga filter: grayscale(1) ham yozildi. Tugagan kartaga sichqoncha kelganda nima bo'ladi?

3. drop-shadow() va box-shadow

Chegara va soyalar darsida drop-shadow() ni qisqa ko'rib, "boshqa funksiyalari — Filterlar darsida" degan edik. Endi farqni to'liq ko'ramiz.

• box-shadow — qutiga soya: element to'rtburchagining (yoki border-radius li shaklining) atrofiga.
• drop-shadow() — ko'rinadigan piksellarga soya: shaffof joylar soya bermaydi.

Shaffof fonli belgi — SVG yulduz — bunda farq yaqqol:

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; gap: 40px; padding: 20px; }
  svg { width: 80px; height: 80px; }
  .quti { box-shadow: 4px 6px 8px rgb(0 0 0 / 0.4); }
  .shakl { filter: drop-shadow(4px 6px 4px rgb(0 0 0 / 0.4)); }
  p { font-size: 13px; }
</style>
<div class="qator">
  <div>
    <svg class="quti" viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#b4461a" d="M12 2l3 7h7l-5.5 4.5 2 7.5L12 17
        l-6.5 4 2-7.5L2 9h7z"/>
    </svg>
    <p>box-shadow</p>
  </div>
  <div>
    <svg class="shakl" viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#b4461a" d="M12 2l3 7h7l-5.5 4.5 2 7.5L12 17
        l-6.5 4 2-7.5L2 9h7z"/>
    </svg>
    <p>drop-shadow()</p>
  </div>
</div>

Nimaga qarang: chapdagi yulduz ortida ko'rinmas to'rtburchakning soyasi — yulduzga hech aloqasi yo'q. O'ngdagisida soya yulduzning har bir uchini takrorlaydi.

Uch farq:

1. drop-shadow() da spread (to'rtinchi uzunlik) yo'q va inset ham yo'q.
2. box-shadow ni vergul bilan bir nechta qilib yozasiz; drop-shadow() ni esa zanjirda takrorlaysiz: drop-shadow(...) drop-shadow(...).
3. drop-shadow() — filter, u ichidagi hamma narsaga, matnga ham soya beradi. Bu kartaga emas, belgi, logotip yoki shaffof PNG rasmga mos.

Qoida: to'rtburchak karta — box-shadow. Shaffof fonli rasm, belgi, keyingi darsdagi clip-path bilan kesilgan shakl — drop-shadow().

Tekshirib ko'ring: «Bahor» logotipi — shaffof fonli PNG rasm, unda choynak shakli. Soya choynak shaklini takrorlasin. Qaysi biri: box-shadow yoki drop-shadow()?

4. backdrop-filter: orqadagi narsani xiralashtirish

4.1 Shisha panel

backdrop-filter — filterni elementning o'ziga emas, uning orqasida ko'rinib turgan narsaga qo'llaydi. Muzli oynani tasavvur qiling: oynaning o'zi toza, ortidagi narsa esa xira ko'rinadi. Dizaynerlar buni glassmorphism ("shisha uslubi") deyishadi.

<style>
  body { font-family: system-ui, sans-serif; margin: 0; }
  .fon {
    padding: 24px 16px;
    background:
      radial-gradient(circle at 20% 30%, #ffd54a 0 18%,
        transparent 19%),
      radial-gradient(circle at 75% 60%, #b4461a 0 22%,
        transparent 23%),
      linear-gradient(135deg, #2f6b3a, #8fd3ff);
  }
  .panel {
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    color: #1f2a24;
  }
  .oddiy { background: rgb(255 250 240 / 0.35); }
  .shisha {
    background: rgb(255 250 240 / 0.35);
    backdrop-filter: blur(10px);
  }
</style>
<div class="fon">
  <p class="panel oddiy">❌ Shaffof fon: dumaloqlar chalg'itadi</p>
  <p class="panel shisha">✅ Shaffof fon + blur: matn aniqroq</p>
</div>

Nimaga qarang: ikkala panel ham bir xil yarim shaffof qaymoq fonli. Tepadagisida sariq va qizg'ish dumaloqlarning chetlari matn ortida aniq ko'rinadi. Pastdagisida ular xira dog'ga aylangan — matn ular fonida yaxshiroq ajralib turadi.

Muhim shart: element foni shaffof yoki yarim shaffof bo'lsin (Ranglar 1 dagi rgb(... / 0.35)). To'liq qalin fon bo'lsa, orqasidagi narsa baribir ko'rinmaydi va backdrop-filter ning ta'siri ham ko'rinmaydi.

4.2 Kontrast xavfi

Shisha chiroyli, lekin xavfli. Orqadagi narsa har joyda boshqacha: sahifa aylantirilganda panel ostiga oq matn ham, qora rasm ham kelishi mumkin. Bitta holatda kontrast 7:1, boshqasida 2:1 — va Accessibility darsidagi 4.5:1 talabi buziladi.

Uchta qoida:

• Fon shaffofligi kam bo'lsin. 0.35 emas, 0.75–0.85: xira dog' baribir seziladi, lekin matn doim o'qiladi.
• Eng yomon holatni tekshiring. Panel ostiga eng yorqin va eng qorong'i joyni olib keling.
• Zaxira yozing. backdrop-filter ni bilmaydigan brauzerda yarim shaffof fon qoladi va matn chalkash ko'rinadi.

/* Avval — hamma joyda o'qiladigan qalin fon */
.shisha {
  background: rgb(255 250 240 / 0.95);
}

/* Shisha — faqat brauzer bilsa */
@supports (backdrop-filter: blur(1px)) {
  .shisha {
    background: rgb(255 250 240 / 0.8);
    backdrop-filter: blur(10px);
  }
}

@supports ni Brauzer mosligi darsida o'rgangansiz. Baseline ma'lumotiga ko'ra backdrop-filter 2024-yil 16-sentabrdan Baseline ("yangi"): Safari 18 da prefiks talab qilmay qo'ydi. Undan oldingi Safari'larda faqat -webkit-backdrop-filter ishlagan — eski kodda ikkala qatorni ko'rasiz.

Tekshirib ko'ring: .panel { background: #fffaf0; backdrop-filter: blur(10px); }. Dizayner "shisha effekti ko'rinmayapti" deydi. Nega?

5. Filterning yon ta'sirlari

filter faqat rang emas — u layout qoidalariga ham tegadi. Ikkitasini position va z-index darslarida ro'yxatda ko'rgan edik.

• Stacking context yaratadi. filter (qiymati none bo'lmasa) va backdrop-filter li element o'z qatlamini ochadi. Ichidagi z-index: 999 element tashqaridagi narsalar ustiga chiqa olmaydi.
• fixed bolalarning containing block'i bo'ladi. Chrome'da o'lchadik: sahifaning 100×100 nuqtasidagi quti ichida position: fixed; top: 0; left: 0 element bor. Oddiy qutida u ekranning burchagiga (0, 0) chiqdi. Qutiga filter: blur(0) — ko'zga ko'rinmaydigan filter — berilgach, element qutining burchagida (100, 100) qoldi. backdrop-filter bilan ham xuddi shunday.

Nega shunday? Filter butun elementni bitta "surat" qilib chizadi, keyin suratni o'zgartiradi. Ichidagi bolalar ham o'sha suratning bir qismi bo'lishi kerak. Shuning uchun ular tashqariga — boshqa qatlamga yoki ekran burchagiga — "qochib" chiqa olmaydi. 2D transformlar darsida transform ning xuddi shunday yon ta'sirini ko'rgan edingiz.

Amaliy xulosa: modal oyna yoki "Yuqoriga" tugmasi kabi fixed elementni filterli ota ichiga qo'ymang. Top layer dagi dialog va popover bunga bog'liq emas — ular top layer'da chiqadi.

Tekshirib ko'ring: Sahifaga "qorong'i rejim" o'rniga tezkor yechim sifatida body { filter: invert(1); } yozildi. Sahifadagi position: fixed; bottom: 10px "Yuqoriga" tugmasi va rasmlar bilan nima bo'ladi?

6. Blend mode'lar: qatlamlarni aralashtirish

6.1 mix-blend-mode

Oddiy holatda ustdagi element ostidagisini shunchaki yopadi. Blend mode (aralashtirish rejimi) esa ustki va ostki qatlam ranglarini formula bilan aralashtiradi. Photoshop yoki Figma'dagi "Multiply", "Screen" qatlam rejimlari — aynan shular.

mix-blend-mode — element o'zidan pastdagi hamma narsa bilan qanday aralashishi. Klassik vazifa: oq fonli logotip rangli fonga qo'yildi — atrofida xunuk oq to'rtburchak:

<style>
  body { font-family: system-ui, sans-serif; margin: 0; }
  .fon {
    display: flex;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(90deg, #f2b04a, #8fd3ff);
  }
  .logo {
    padding: 8px 12px;
    background: #ffffff;
    color: #2f6b3a;
    font: bold 22px/1 Georgia, serif;
  }
  .multiply { mix-blend-mode: multiply; }
</style>
<div class="fon">
  <div class="logo">❌ BAHOR</div>
  <div class="logo multiply">✅ BAHOR</div>
</div>

Nimaga qarang: chapdagi logotip oq to'rtburchak ichida. O'ngdagisida oq fon yo'qoldi — gradient ko'rinib turibdi, harflar esa yashil qoldi. multiply (ko'paytirish) ranglarni ko'paytiradi: oq bilan ko'paytirilgan rang o'zgarmaydi, shuning uchun oq "yo'qoladi". Qora esa qora qoladi.

Eng ko'p ishlatiladiganlari:

mix-blend-mode 2020-yildan Baseline (keng tarqalgan).

6.2 background-blend-mode

background-blend-mode — bitta elementning fon qatlamlarini bir-biri bilan aralashtiradi (Fonlar darsidagi ko'p qatlamli fon). Rasmni brend rangiga "bo'yash" uchun qulay: rasm + rang + multiply yoki luminosity.

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; gap: 12px; }
  .rasm {
    width: 140px;
    height: 90px;
    border-radius: 8px;
    background-image:
      radial-gradient(circle at 70% 35%, #ffd54a 0 12%,
        transparent 13%),
      linear-gradient(#8fd3ff, #e8f4ff 55%, #b4461a 55%);
  }
  .bahor {
    background-color: #2f6b3a;
    background-blend-mode: luminosity;
  }
</style>
<div class="qator">
  <div class="rasm" role="img" aria-label="Asl manzara"></div>
  <div class="rasm bahor" role="img"
       aria-label="Yashilga bo'yalgan manzara"></div>
</div>

Nimaga qarang: o'ngdagi manzara butunlay yashil tuslarda — osmon, quyosh va yer bir rangning turli yorqinligida. Bitta rasm — ikki xil ko'rinish, ikkinchi fayl kerak emas.

6.3 isolation: aralashishni chegaralash

mix-blend-mode elementni o'zidan pastdagi hamma narsa bilan aralashtiradi — kerak bo'lmagan qatlam bilan ham. isolation: isolate — "aralashish mening ichimda qolsin". U yangi stacking context yaratadi: ichidagi blend faqat shu elementning foni bilan ishlaydi, tashqaridagi sahifa foniga yetib bormaydi.

.taom-karta {
  isolation: isolate; /* ichidagi blend karta fonida qoladi */
}

.taom-karta img {
  mix-blend-mode: multiply; /* oq fonli rasm */
}

Qachon kerak: kartaning ichidagi logotipga multiply berdingiz, karta esa rangli sahifa ustida turibdi. isolation siz logotip karta orqali sahifa fonini ham "ko'radi". Kartaga isolation: isolate — muammo yo'q. U hech narsani chizmaydi, faqat chegara qo'yadi. z-index darsidagi ro'yxatda u stacking context'ni "toza" yaratadigan yagona xususiyat edi.

Tekshirib ko'ring: Qora fon ustida olov rasmi bor, rasmning o'zi ham qora fonli. Qora to'rtburchak ko'rinmasin, faqat olov qolsin. Qaysi rejim?

7. SVG filterlar — qisqacha

CSS funksiyalari yetmasa, SVG'ning o'z filterlari bor: feTurbulence (shovqin, "qog'oz" fakturasi), feColorMatrix (istalgan rang almashtirish), feDisplacementMap (to'lqinlanish). Ular sahifadagi svg ichida filter elementi sifatida yoziladi va CSS'dan url() bilan chaqiriladi:

<style>
  body { font-family: system-ui, sans-serif; }
  .ikki-rang {
    filter: url(#bahor-duotone);
    width: 140px;
    height: 90px;
    border-radius: 8px;
    background:
      radial-gradient(circle at 70% 35%, #ffd54a 0 12%,
        transparent 13%),
      linear-gradient(#8fd3ff, #e8f4ff 55%, #b4461a 55%);
  }
</style>
<svg width="0" height="0" aria-hidden="true">
  <filter id="bahor-duotone">
    <feColorMatrix type="matrix" values="
      0.2 0.2 0.2 0 0.1
      0.4 0.4 0.4 0 0.2
      0.2 0.2 0.2 0 0.1
      0   0   0   1 0"/>
  </filter>
</svg>
<div class="ikki-rang" role="img"
     aria-label="Yashil tusdagi manzara"></div>

Nimaga qarang: manzara faqat yashil tuslarda. feColorMatrix — har pikselning qizil, yashil va ko'k qiymatini jadval bo'yicha qayta hisoblaydi. Jadval raqamlarini yodlash shart emas — ular onlayn generatorlarda tanlanadi. SVG'ni CSS bilan ishlatishni SVG'ni stillash darsida to'liq o'rganamiz.

Bilish kerak bo'lgani: url(#id) — sahifadagi SVG filter; SVG filterlar 2015-yildan hamma brauzerda bor (Baseline, keng tarqalgan), lekin murakkab filter sekin ishlashi mumkin.

8. Tezlik narxi

Rendering pipeline darsidan eslang: brauzer har kadrda style → layout → paint → composite qiladi. Filterlar layout'ni o'zgartirmaydi, lekin paint va composite bosqichida ish qo'shadi.

flowchart LR
  A["Style"] --> B["Layout"]
  B --> C["Paint"]
  C --> D["Composite"]
  F["filter, backdrop-filter"] -.->|ish qo'shadi| C
  F -.->|ish qo'shadi| D

Nimaga qarang: filterlar "Layout" ga tegmaydi — sahifadagi elementlar joyidan siljimaydi. Ular faqat chizish (paint) va qatlamlarni yig'ish (composite) bosqichlarini og'irlashtiradi.

• blur() qimmat. Radius qancha katta bo'lsa, har piksel uchun shuncha ko'p qo'shni hisoblanadi. blur(4px) — arzon, blur(40px) katta maydonda — telefonda seziladi.
• backdrop-filter har aylantirishda qayta hisoblanadi, chunki orqadagi narsa o'zgaradi. Butun ekranli shisha fon eski telefonda aylantirishni "tishli" qiladi.
• opacity va transform — eng arzon animatsiya. filter ni animatsiya qilish mumkin, lekin katta elementda va uzoq vaqt emas.

Amaliy qoida: shisha — kichik panelga (header, pastki menyu), katta fonga emas. DevTools'ning Performance paneli bilan eski telefon rejimida (CPU sekinlashtirish) tekshiring.

9. Ko'p uchraydigan xatolar

9.1 Butun kartani oq-qora qilish

.taom-karta.tugadi { filter: grayscale(1) opacity(0.5); } — rasm bilan birga matn ham xira. Kontrast 4.5:1 dan tushadi. Tuzatish: filterni faqat rasmga.

9.2 Ikkinchi filter birinchisini o'chiradi

filter — bitta xususiyat. Ikki qoidada ikki xil funksiya yozsangiz, bittasi yutadi. Tuzatish: kerakli funksiyalarni bitta zanjirda.

9.3 Shisha effekti ko'rinmaydi

Fon qalin, yoki orqada xiralashtiradigan narsa yo'q (oq fon ustida oq panel). Tuzatish: yarim shaffof fon va orqada rangli kontent.

9.4 fixed element "qamalib qoldi"

Filterli ota ichidagi fixed modal ekranga emas, ota qutiga yopishdi. Tuzatish: fixed elementni filterli otadan tashqariga chiqaring yoki dialog ishlating.

9.5 Shisha ustidagi matn o'qilmaydi

Kompyuterda chiroyli, telefonda yorqin rasm ustida oq matn yo'qolib qoldi. Tuzatish: fon shaffofligini kamaytiring (0.8+), eng yomon holatni tekshiring, @supports zaxirasi.

10. Mashqlar

Mashqlarni kurs/mashqlar/06/ papkasida bajaring.

1-mashq (oson): Hover'da jonlanadigan rasm

«Bahor» menyusidagi taom rasmlari biroz "so'lg'in" ko'rinadi. Sichqoncha kartaga kelganda rasm 10% yorqinroq va 20% to'yinganroq bo'lsin. Faqat sichqonchali qurilmada.

Ishora: ikki funksiya — bitta zanjirda. Hover qoidasi — Mobil tuzoqlar darsidagi @media (hover: hover) ichida.

@media (hover: hover) {
  .taom-karta:hover img {
    filter: brightness(1.1) saturate(1.2);
  }
}

2-mashq (o'rta): Rasm ustidagi sarlavha

Bosh sahifada choyxona rasmi ustiga "Choyxona «Bahor»" sarlavhasi qo'yildi. Rasm rang-barang, oq sarlavha yorqin joylarda yo'qolib qolyapti. Rasmni o'zgartirmasdan, faqat CSS bilan sarlavhani o'qiladigan qiling. Ikki yo'lni taklif qiling: biri filter, biri background-blend-mode bilan.

Ishora: brightness() rasmni qoraytiradi. Ikkinchi yo'l — rasm va qora-yashil rangni fon qatlamlarida aralashtirish.

.bosh-rasm img {
  filter: brightness(0.55);
}

.bosh-rasm {
  background-image: url("../assets/images/choyxona.jpg");
  background-color: #1a5d1a;
  background-blend-mode: multiply;
  color: #fffaf0;
}

3-mashq (qiyin): Stajyorning shisha header'i

Stajyor «Bahor» sahifasining yopishqoq header'ini shisha qildi va ichiga "Yuqoriga" tugmasini fixed qilib qo'ydi:

header {
  position: sticky;
  top: 0;
  background: #fffaf0;
  backdrop-filter: blur(40px);
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.2));
}

header .yuqoriga {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

Shikoyatlar:

1. Shisha effekti umuman yo'q.
2. "Yuqoriga" tugmasi ekranning pastida emas, header ichida turibdi.
3. Eski telefonda aylantirish "tishlanadi".
4. Ranglar o'zgartirilgach, header ostidan yorqin rasm o'tganda matn o'qilmay qoladi.

Har muammoning sababini toping va tuzating.

Ishora: «Shisha panel», «Filterning yon ta'sirlari», «Tezlik narxi» va «Kontrast xavfi» bo'limlari.

header {
  position: sticky;
  top: 0;
  background: rgb(255 250 240 / 0.95);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
}

@supports (backdrop-filter: blur(1px)) {
  header {
    background: rgb(255 250 240 / 0.8);
    backdrop-filter: blur(8px);
  }
}

4-mashq: Portfolio qadami — shisha jadval sarlavhasi

Portfolio'ning "Men haqimda" sahifasidagi "O'qish rejam" jadvalida thead th yopishqoq (sticky) va fonga var(--rang-fon) bilan bo'yalgan. Jadval aylantirilganda qatorlar sarlavha ostidan o'tadi.

1. Sarlavha foni biroz shaffof bo'lib, ostidan o'tayotgan qatorlar xira ko'rinsin.
2. backdrop-filter ni bilmaydigan brauzerda hozirgi qalin fon qolsin.
3. Qorong'i rejimda ham ishlasin.
4. Matn kontrasti 4.5:1 dan tushmasin — sababini yozing.

Ishora: yarim shaffof fonni o'zgaruvchidan — Ranglar 3 dagi color-mix(in oklch, var(--rang-fon) 85%, transparent).

/* Shisha sarlavha: faqat brauzer bilsa (Filterlar darsi) */
@supports (backdrop-filter: blur(1px)) {
  thead th {
    background-color: color-mix(
      in oklch,
      var(--rang-fon) 85%,
      transparent
    );
    backdrop-filter: blur(6px);
  }
}

11. Real ishda

• Operatsion tizimlar. macOS, iOS va Windows 11 menyulari "shisha" — veb-ilovalar ham ularga o'xshashni xohlaydi. Apple'ning 2025-yilgi "Liquid Glass" dizayni bu uslubni yana modaga olib kirdi, kontrast muammosi haqidagi bahslarni ham.
• Internet-do'konlar. "Tugagan" mahsulot kartalari grayscale() bilan, hover'dagi "jonlanish" — brightness() bilan. Bitta rasm, bir necha holat.
• Brend uslubi. Blog va yangiliklar saytlari rasmlarni background-blend-mode yoki SVG filter bilan bir xil rangga bo'yab, sahifani yaxlit qiladi.
• Intervyuda so'raladi: "box-shadow va drop-shadow farqi?", "backdrop-filter ishlamasa nima tekshirasiz?", "Nega filter li ota ichida fixed element buziladi?". Endi uchalasiga ham javob bera olasiz.

Xulosa

• filter — elementga rasm effekti: grayscale, blur, brightness, contrast, saturate, drop-shadow va boshqalar; zanjirda tartib muhim.
• drop-shadow() shaklga, box-shadow qutiga soya beradi.
• backdrop-filter — orqadagi narsani xiralashtiradi; yarim shaffof fon, kontrast va @supports zaxirasi bilan.
• filter va backdrop-filter stacking context va fixed bolalar uchun containing block yaratadi.
• mix-blend-mode — element pastdagi qatlamlar bilan, background-blend-mode — fon qatlamlari o'zaro aralashadi; isolation: isolate chegara qo'yadi.
• Katta blur() va butun ekranli shisha — qimmat; kichik panelga ishlating.

Keyingi dars: clip-path, shape() va maskalar — elementni doira, ko'pburchak va istalgan shaklga kesamiz, gradient bilan asta "so'nadigan" qilamiz.

Manbalar

• MDN: "filter", "backdrop-filter", "drop-shadow()", "mix-blend-mode", "background-blend-mode", "isolation" — developer.mozilla.org
• W3C: "Filter Effects Module Level 1", "Compositing and Blending Level 1" — w3.org/TR
• web-features: "backdrop-filter", "filter", "mix-blend-mode" — web-platform-dx.github.io/web-features-explorer
• web.dev: "Learn CSS — Filters", "Learn CSS — Blend modes" — web.dev/learn/css