Drop Shadow (Eng klassik va eng ko‘p ishlatiladigan)
Element ostiga tushadigan oddiy soya. Go‘yoki element fon ustida turibdi.
Qayerda ishlatiladi?
- Card
- Modal
- Button
- Navbar
Nima beradi?
- Depth (chuqurlik)
- Element “bosiladigan” ekanini bildiradi
Misol (mantiqan):
- Card fon ustida suzib turgandek
- Button bosishga tayyor
Drop shadow = “bu element fon emas, alohida obyekt”
Drop shadov
Inner Shadow (Ichkariga botgan effekt)
Soya tashqariga emas, ichkariga tushadi.
Qayerda ishlatiladi?
- Input field
- Textarea
- Ba’zan neumorphism dizaynida
Nima beradi?
- Element ichiga botgandek ko‘rinadi
- “Bu joyga yoziladi” degan signal
Inner shadow
Soft Shadow (Yumshoq, noaniq)
Blur katta, opacity past bo‘lgan soya.
Qayerda ishlatiladi?
- Zamonaviy web UI
- Minimal dizayn
- Katta card’lar
Nima beradi?
- Elegant ko‘rinish
- Ko‘zga urilmaydi
Agar shadow sezilib tursa — demak u haddan oshgan
Soft shadov
Hard Shadow (Qattiq, aniq)
Nima?
Blur kam, chetlari aniq bo‘lgan soya.
Qayerda ishlatiladi?
- Material Design
- Illustrativ UI
- Retro yoki bold dizaynlar
Nima beradi?
- Kuchli urg‘u
- Elementni ajratib ko‘rsatadi
Xavfi:
Juda ko‘p ishlatish dizaynni xunuklashtiradi.
Hard shadow
Elevation Shadow (Daraja asosida)
Shadow element balandligiga qarab o‘zgaradi.
Qayerda ishlatiladi?
- Google Material Design
- Floating button
- App bar, modal
Nima beradi?
Qaysi element yuqorida, qaysi biri pastda ekanini ko‘rsatadi
Misol:
- Modal - eng kuchli shadow
- Card - o‘rtacha
- Button - yengil
| Shadow turi | Vazifasi |
|---|---|
| Drop shadow | Elementni fondan ajratish |
| Inner shadow | Ichki interaction yaratish |
| Soft shadow | Zamonaviy va yengil effekt |
| Hard shadow | Kuchli urg‘u yaratish |
| Elevation | Ierarxiya va depth ko‘rsatish |
Top comments (0)