drop-shadow()
CSS drop-shadow() filtr funksiyasi rasmga tushuvchi soya (drop shadow) effektini qo‘llaydi.
Misol
Rasmga turli tushuvchi soya effektlarini qo‘shing:
#img1 {
filter: drop-shadow(8px 8px);
}
#img2 {
filter: drop-shadow(8px 8px 10px);
}
#img3 {
filter: drop-shadow(10px 10px 7px orange);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| drop-shadow() | 18 | 12 | 35 | 6 | 15 |
CSS sintaksisi
drop-shadow(h-shadow v-shadow blur color)
| Qiymat | Tavsif |
|---|---|
| h-shadow | Majburiy. Gorizontal soya uchun piksel qiymatini belgilaydi. Manfiy qiymatlar soyani rasmning chap tomoniga joylashtiradi |
| v-shadow | Majburiy. Vertikal soya uchun piksel qiymatini belgilaydi. Manfiy qiymatlar soyani rasmning yuqorisiga joylashtiradi |
| blur | Ixtiyoriy. Soyaga pikselda xiralik (blur) effektini qo‘shadi. Qiymat qanchalik katta bo‘lsa, xiralik shunchalik kuchli bo‘ladi (soya kattaroq va ochroq bo‘ladi). Manfiy qiymatlarga ruxsat berilmaydi. Agar qiymat ko‘rsatilmasa, 0 ishlatiladi (soyaning cheti keskin bo‘ladi) |
| color | Ixtiyoriy. Soyaga rang qo‘shadi. Agar ko‘rsatilmasa, rang brauzerga bog‘liq bo‘ladi (ko‘pincha qora) |
| Versiya: | CSS Filter Effects moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
Rasmga turli tushuvchi soya effektlarini qo‘shing (h-shadow va v-shadow uchun manfiy qiymatlar bilan):
#img1 {
filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
filter: drop-shadow(-10px -10px 7px lightblue);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS filter xususiyati.
CSS ma’lumotnomasi: CSS blur() funksiyasi.
CSS ma’lumotnomasi: CSS brightness() funksiyasi.
CSS ma’lumotnomasi: CSS contrast() funksiyasi.
CSS ma’lumotnomasi: CSS grayscale() funksiyasi.
CSS ma’lumotnomasi: CSS hue-rotate() funksiyasi.
CSS ma’lumotnomasi: CSS invert() funksiyasi.
CSS ma’lumotnomasi: CSS opacity() funksiyasi.
CSS ma’lumotnomasi: CSS saturate() funksiyasi.
CSS ma’lumotnomasi: CSS sepia() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!