Chapter 19 — Filter va Blend Mode Effektlari

---

19.1 filter Xususiyati

Example

styles.css
CSSNusxalash
01.blur { filter: blur(5px); }
02.bright { filter: brightness(1.2); }
03.grayscale { filter: grayscale(100%); }
04.combo { filter: contrast(1.1) saturate(1.3); }

19.2 backdrop-filter va mix-blend-mode

Example

styles.css
CSSNusxalash
01.glass {
02  background: rgba(255,255,255,0.2);
03  backdrop-filter: blur(10px);
04}
05.blend {
06  mix-blend-mode: multiply;
07}

⚠️ Common Mistake
backdrop-filterni shaffof fon (masalan rgba(255,255,255,0.2)) siz ishlatish — effekt umuman ko'rinmaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Rasmga filter: grayscale(100%) bering, hover'da grayscale(0%)ga o'zgartirib, silliq transition qo'shing.

🟡 Exercise 2 — Medium

Task: Glassmorphism karta yarating — shaffof fon + backdrop-filter: blur(10px) + yengil chegara.

🔴 Exercise 3 — Hard

Task: mix-blend-mode: overlay yordamida rasm ustiga rangli qatlam qo'yib, kreativ vizual effekt yarating.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.card { backdrop-filter: blur(10px); background: white; }

Your Task: Blur effekti nega ko'rinmayapti?

<details> <summary>Solution</summary> `background: white` — to'liq shaffof EMAS fon, shuning uchun backdrop-filter "ortida" ko'radigan narsa yo'q (fon uni butunlay qoplaydi). Yechim: `background: rgba(255,255,255,0.2);` — qisman shaffof fon berish. </details>

---

📌 Chapter Summary

filter — elementning o'zini (blur, brightness, grayscale kabi) o'zgartiradi. backdrop-filter — ortidagi kontentga effekt beradi (glassmorphism uchun asosiy). mix-blend-mode — qatlamlar orasidagi rang aralashuvini boshqaradi.

🎯 Key Takeaways

• backdrop-filter uchun element qisman shaffof bo'lishi SHART
• Filter funksiyalari bitta qatorda birlashtirilishi mumkin
• mix-blend-mode kreativ, Photoshop-uslubidagi effektlar uchun

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01filter: blur() brightness() contrast() grayscale() saturate();
02backdrop-filter: blur();
03mix-blend-mode: multiply | screen | overlay | ...;

---