Chapter 7 — Soya, Blur va Glassmorphism

---

7.1 Shadow

Example

index.html
HTMLNusxalash
01<div class="shadow-lg hover:shadow-2xl transition-shadow duration-300 p-6 rounded-xl bg-white">
02  Karta hover'da soyasi kattalashadi
03</div>

Mental Model

🧠 Hover'da soya kuchaytirish — "elevation" tamoyili: element "ko'tarilib chiqqandek" tuyuladi, bu uni interaktiv ekanligini bildiradi.

7.2 Filter va Backdrop

Example

index.html
HTMLNusxalash
01<div class="bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 text-white">
02  Glassmorphism Card
03</div>

⚠️ Common Mistake
backdrop-blur ni shaffof fon siz ishlatish — effekt umuman ko'rinmaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Kartaga shadow-lg bering, hover:shadow-2xl transition-shadow duration-300 qo'shing.

🟡 Exercise 2 — Medium

Task: Rasm galereyasi yarating — har bir rasm grayscale hover:grayscale-0 transition duration-300.

🔴 Exercise 3 — Hard

Task: To'liq Glassmorphism Card yarating — gradient fon ustida, bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl.

---

🔮 Predict the Output

index.html
HTMLNusxalash
01<div class="shadow-none hover:shadow-xl transition-shadow">Karta</div>

🧠 Think first! Bu element sahifa yuklanganda qanday ko'rinadi va hover'da nima o'zgaradi?

<details> <summary>Answer</summary> Boshida soyasiz (`shadow-none`), hover paytida `shadow-xl` bilan kuchli soya paydo bo'ladi, `transition-shadow` tufayli bu o'zgarish silliq bo'ladi. </details>

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="backdrop-blur-lg rounded-xl p-6">Matn</div>

Your Task: Nega backdrop-blur effekti ko'rinmayapti?

<details> <summary>Solution</summary> Elementning o'zida shaffof fon yo'q. `bg-white/20` kabi klass qo'shish kerak — `backdrop-blur` faqat ortidagi narsani xiralashtiradi, buni ko'rish uchun element qisman shaffof bo'lishi shart. </details>

---

📌 Chapter Summary

Shadow kattaligi elementning "muhimligi" va interaktivligiga mos tanlanadi. Glassmorphism = shaffof fon + backdrop-blur + yengil chegara.

🎯 Key Takeaways

• hover:shadow-* — elevation orqali interaktivlikni bildiradi
• Backdrop-blur uchun shaffof fon shart
• Filter effektlari GPU resursini ko'p sarflashi mumkin, me'yorida ishlatish kerak

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Soya:      shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl
02Blur:      blur-sm, blur-lg, backdrop-blur-md
03Filter:    grayscale, brightness-50, contrast-125

---