Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS rasm filtrlari

ULASHISH

CSS filtrlar

CSS filter xossasi elementlarga vizual effektlar (xira va to‘yinganlik kabi) qo‘shish uchun ishlatiladi.

filter xossasi ichida quyidagi CSS funksiyalaridan foydalanishingiz mumkin:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

CSS blur() funksiyasi

blur() filtr funksiyasi elementga xira (blur) effekti qo‘llaydi. Kattaroq qiymat ko‘proq xiralik beradi.

Agar qiymat ko‘rsatilmasa, 0 ishlatiladi (effekt yo‘q).

Misol

<img> elementlariga turli xiralashtirish effektlarini qo‘llash:

#img1 {
  filter: blur(2px);
}

#img2 {
  filter: blur(6px);
}
O‘zingiz sinab ko‘ring »

CSS brightness() funksiyasi

brightness() filtr funksiyasi elementning yorqinligini sozlaydi.

  • 100% — standart va asl yorqinlikni ifodalaydi
  • 100% dan yuqori qiymatlar yorqinroq natija beradi
  • 100% dan past qiymatlar qoraroq natija beradi
  • 0% rasmini to‘liq qora qiladi

Misol

Rasmni asl holatidan yorqinroq va qorong‘iroq qilish:

#img1 {
  filter: brightness(150%);
}

#img2 {
  filter: brightness(50%);
}
O‘zingiz sinab ko‘ring »

CSS contrast() funksiyasi

contrast() filtr funksiyasi elementning kontrastini sozlaydi.

  • 100% — standart va asl kontrastni ifodalaydi
  • 100% dan yuqori qiymatlar kontrastni oshiradi
  • 100% dan past qiymatlar kontrastni kamaytiradi
  • 0% rasmini to‘liq kulrang qiladi

Misol

Rasm kontrastini oshirish va kamaytirish:

#img1 {
  filter: contrast(150%);
}

#img2 {
  filter: contrast(50%);
}
O‘zingiz sinab ko‘ring »

CSS drop-shadow() funksiyasi

drop-shadow() filtr funksiyasi rasmga tushadigan soya effekti qo‘llaydi.

Misol

Rasmga turli drop-shadow effektlarini qo‘shish:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}

#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}
O‘zingiz sinab ko‘ring »

CSS grayscale() funksiyasi

grayscale() filtr funksiyasi rasmini kulrang (grayscale) holatga aylantiradi.

  • 100% (yoki 1) rasmini to‘liq kulrang qiladi
  • 0% (yoki 0) hech qanday ta’sir qilmaydi

Misol

Rasm uchun turli kulrang (grayscale) qiymatlarini belgilash:

#img1 {
  filter: grayscale(1);
}

#img2 {
  filter: grayscale(60%);
}

#img3 {
  filter: grayscale(0.4);
}
O‘zingiz sinab ko‘ring »

CSS hue-rotate() funksiyasi

hue-rotate() filtr funksiyasi elementga rang aylanishi (rotation) effekti qo‘llaydi.

Bu funksiya rasmga rang ohangi aylanishini qo‘llaydi. Qiymat rasm rang doirasi atrofida necha daraja sozlanishini belgilaydi. Musbat aylanish rang ohangi qiymatini oshiradi, manfiy aylanish esa kamaytiradi. 0deg asl rasmini ifodalaydi.

Misol

Rasm uchun turli rang aylanishlarini belgilash:

#img1 {
  filter: hue-rotate(200deg);
}

#img2 {
  filter: hue-rotate(90deg);
}

#img3 {
  filter: hue-rotate(-90deg);
}
O‘zingiz sinab ko‘ring »

CSS invert() funksiyasi

invert() filtr funksiyasi rasm rangini teskari (invert) qiladi.

  • 100% (yoki 1) ranglarni to‘liq teskari aylantiradi
  • 0% (yoki 0) hech qanday ta’sir qilmaydi

Misol

Rasm ranglarini teskari aylantirish:

#img1 {
  filter: invert(0.3);
}

#img2 {
  filter: invert(70%);
}

#img3 {
  filter: invert(100%);
}
O‘zingiz sinab ko‘ring »

CSS opacity() funksiyasi

opacity() filtr funksiyasi elementga shaffoflik effekti qo‘llaydi.

  • 100% (yoki 1) ta’sir qilmaydi
  • 50% (yoki 0.5) elementni 50% shaffof qiladi
  • 0% (yoki 0) elementni to‘liq shaffof qiladi

Misol

Rasm uchun turli shaffoflik qiymatlarini belgilash:

#img1 {
  filter: opacity(80%);
}

#img2 {
  filter: opacity(50%);
}

#img3 {
  filter: opacity(0.2);
}
O‘zingiz sinab ko‘ring »

CSS saturate() funksiyasi

saturate() filtr funksiyasi elementning to‘yinganligini (rang intensivligini) sozlaydi.

  • 100% (yoki 1) ta’sir qilmaydi
  • 0% (yoki 0) elementni to‘liq to‘yinganliksiz qiladi
  • 200% (yoki 2) elementni juda kuchli to‘yingan qiladi

Misol

Rasm uchun turli to‘yinganlik qiymatlarini belgilash:

#img1 {
  filter: saturate(0);
}

#img2 {
  filter: saturate(100%);
}

#img3 {
  filter: saturate(200%);
}
O‘zingiz sinab ko‘ring »

CSS sepia() funksiyasi

sepia() filtr funksiyasi rasmini sepia toniga (iliqroq, qo‘ng‘ir/sariqroq rangga) aylantiradi.

  • 0% (yoki 0) hech qanday ta’sir qilmaydi
  • 100% (yoki 1) to‘liq sepiya effektini qo‘llaydi

Misol

Rasm uchun turli sepia qiymatlarini belgilash:

#img1 {
  filter: sepia(1);
}

#img2 {
  filter: sepia(60%);
}

#img3 {
  filter: sepia(0.4);
}
O‘zingiz sinab ko‘ring »

CSS filtr funksiyalari

Quyidagi jadval CSS filtr funksiyalarini sanab o‘tadi:

Function Tavsif
blur() Elementga xiralashtirish (blur) effektini qo‘llaydi
brightness() Elementning yorqinligini sozlaydi
contrast() Elementning kontrastini sozlaydi
drop-shadow() Rasmga soya tushirish (drop-shadow) effektini qo‘llaydi
grayscale() Rasmni kulrang rangga o‘zgartiradi
hue-rotate() Elementga rang tusini aylantirishni qo‘llaydi
invert() Tasvir rangini o‘zgartiradi
opacity() Elementga shaffoflik effektini qo‘llaydi
saturate() Elementning to‘yinganligini (rang intensivligini) sozlaydi
sepia() Tasvirni sepiyaga aylantiradi

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish