filter
Misol
Barcha rasmlarni oq-qora (100% kulrang) holatga o‘tkazing:
img {
filter: grayscale(100%);
}
O‘zingiz sinab ko‘ring »
Maslahat: Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
filter xususiyati elementga (ko‘pincha <img> ga) vizual effektlarni (masalan, xiralik va to‘yinganlik) belgilaydi.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.filter="grayscale(100%)" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| filter | 53 | 13 | 35 | 9 | 40 |
CSS sintaksisi
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Maslahat: Bir nechta filtrdan foydalanish uchun har bir filtrni bo‘sh joy bilan ajrating (quyidagi "Ko‘proq misollar" bo‘limiga qarang).
Filtr funksiyalari
Eslatma: Foiz qiymatlaridan (masalan, 75%) foydalanadigan filtrlar qiymatni o‘nli kasr ko‘rinishida ham (masalan, 0.75) qabul qiladi.
| Filtr | Tavsif | Demo |
|---|---|---|
| none | Standart qiymat. Hech qanday effekt belgilanmaydi | Demo ❯ |
| blur(px) | Rasmga xiralik effektini qo‘llaydi. Qiymat qanchalik katta bo‘lsa, xiralik shunchalik kuchli bo‘ladi. Agar qiymat ko‘rsatilmasa, 0 ishlatiladi. |
Demo ❯ |
| brightness(%) | Rasm yorqinligini sozlaydi. 0% rasmni butunlay qora qiladi. 100% (1) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% dan yuqori qiymatlar yorqinroq natija beradi. 100% dan past qiymatlar qoraroq natija beradi. |
Demo ❯ |
| contrast(%) | Rasm kontrastini sozlaydi. 0% rasmni butunlay kulrang qiladi. 100% (1) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% dan yuqori qiymatlar kontrastni oshiradi. 100% dan past qiymatlar kontrastni pasaytiradi. |
Demo ❯ |
| drop-shadow(h-shadow v-shadow blur spread color) | Rasmga tushuvchi soya (drop shadow) effektini qo‘llaydi. Mumkin bo‘lgan qiymatlar: 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 ustiga joylashtiradi. blur - Ixtiyoriy. Bu uchinchi qiymat bo‘lib, piksellarda berilishi kerak. Soyaga xiralik 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 (soya cheti keskin bo‘ladi). spread - Ixtiyoriy. Bu to‘rtinchi qiymat bo‘lib, piksellarda berilishi kerak. Musbat qiymatlar soyaning yoyilib kattalashishiga, manfiy qiymatlar esa kichrayishiga olib keladi. Agar ko‘rsatilmasa, 0 bo‘ladi (soya element bilan bir xil o‘lchamda bo‘ladi). Eslatma: Chrome, Safari va Opera, ehtimol boshqa brauzerlar ham, bu to‘rtinchi uzunlikni qo‘llab-quvvatlamaydi; u qo‘shilsa, soya render qilinmaydi. color - Ixtiyoriy. Soyaga rang qo‘shadi. Agar ko‘rsatilmasa, rang brauzerga bog‘liq bo‘ladi (ko‘pincha qora). Gorizontal va vertikal bo‘yicha 8px o‘lchamdagi, 10px xiralik effektiga ega qizil soya yaratish misoli: filter: drop-shadow(8px 8px 10px red); Maslahat: Bu filtr box-shadow xususiyatiga o‘xshaydi. |
Demo ❯ |
| grayscale(%) | Rasmni kulrang tusga o‘tkazadi. 0% (0) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% rasmni butunlay kulrang qiladi Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
Demo ❯ |
| hue-rotate(deg) | Rasmga rang tusini aylantirish (hue rotation) effektini qo‘llaydi. Qiymat rasm namunalari rang doirasi bo‘ylab necha gradusga siljitilishini belgilaydi. 0deg standart qiymat bo‘lib, asl rasmni ifodalaydi. Eslatma: Maksimal qiymat — 360deg. |
Demo ❯ |
| invert(%) | Rasmdagi namunalarni invertlaydi (ranglarini teskarisiga aylantiradi). 0% (0) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% rasmni butunlay invertlaydi. Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
Demo ❯ |
| opacity(%) | Rasm uchun noshaffoflik darajasini o‘rnatadi. Noshaffoflik darajasi shaffoflik darajasini ifodalaydi, bunda: 0% — butunlay shaffof. 100% (1) standart qiymat bo‘lib, asl rasmni (shaffofliksiz) ifodalaydi. Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. Maslahat: Bu filtr opacity xususiyatiga o‘xshaydi. |
Demo ❯ |
| saturate(%) | Rasm rangining to‘yinganligini o‘zgartiradi. 0% (0) rasmni butunlay to‘yinmagan (rangsiz) qiladi. 100% standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% dan yuqori qiymatlar o‘ta to‘yingan natija beradi. Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
Demo ❯ |
| sepia(%) | Rasmni sepiya tusiga o‘tkazadi. 0% (0) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% rasmni butunlay sepiya tusiga o‘tkazadi. Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
Demo ❯ |
| url() | url() funksiyasi SVG filtrni belgilovchi XML faylning manzilini qabul qiladi va muayyan filtr elementiga ishora qiluvchi langarni (anchor) o‘z ichiga olishi mumkin. Misol: filter: url(svg-url#element-id) |
|
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Xiralashtirish (blur) misoli
Rasmga xiralik effektini qo‘llang:
img {
filter: blur(5px);
}
O‘zingiz sinab ko‘ring »
Xiralashtirish (blur) misoli 2
Xiralashtirilgan fon rasmini qo‘llang:
img.background {
filter: blur(35px);
}
O‘zingiz sinab ko‘ring »
Yorqinlik (brightness) misoli
Rasm yorqinligini sozlang:
img {
filter: brightness(200%);
}
O‘zingiz sinab ko‘ring »
Kontrast (contrast) misoli
Rasm kontrastini sozlang:
img {
filter: contrast(200%);
}
O‘zingiz sinab ko‘ring »
Tushuvchi soya (drop-shadow) misoli
Rasmga tushuvchi soya effektini qo‘llang:
img {
filter: drop-shadow(8px 8px 10px gray);
}
O‘zingiz sinab ko‘ring »
Kulrang tus (grayscale) misoli
Rasmni kulrang tusga o‘tkazing:
img {
filter: grayscale(50%);
}
O‘zingiz sinab ko‘ring »
Rang tusini aylantirish (hue-rotate) misoli
Rasmga rang tusini aylantirishni qo‘llang:
img {
filter: hue-rotate(90deg);
}
O‘zingiz sinab ko‘ring »
Invertlash (invert) misoli
Rasmdagi namunalarni invertlang:
img {
filter: invert(100%);
}
O‘zingiz sinab ko‘ring »
Noshaffoflik (opacity) misoli
Rasm uchun noshaffoflik darajasini o‘rnating:
img {
filter: opacity(30%);
}
O‘zingiz sinab ko‘ring »
To‘yinganlik (saturate) misoli
Rasm rangini to‘yintiring:
img {
filter: saturate(800%);
}
O‘zingiz sinab ko‘ring »
Sepiya (sepia) misoli
Rasmni sepiya tusiga o‘tkazing:
img {
filter: sepia(100%);
}
O‘zingiz sinab ko‘ring »
Bir nechta filtrdan foydalanish
Bir nechta filtrdan foydalanish uchun har bir filtrni bo‘sh joy bilan ajrating. Tartib muhim ekaniga e’tibor bering (masalan, sepia() dan keyin grayscale() ishlatilsa, rasm butunlay kulrang bo‘ladi):
img {
filter: contrast(200%) brightness(150%);
}
O‘zingiz sinab ko‘ring »
Barcha filtrlar
Barcha filtr funksiyalarining namoyishi:
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(0.30);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px green);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS rasmlar
HTML DOM ma’lumotnomasi: filter xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!