CSS / CSS filter

CSS filter

CSS filter property нь элементэд зургийн шүүлтүүр хэрэглэдэг — Photoshop-ын нөлөөнүүдтэй ижил төстэй. Зураг, текст, бүхэл элементэд хэрэглэнэ.

filter хэрэглэх үндэс

css

.элемент {
  filter: функц(утга);
}

Олон функц нэгэн зэрэг бичнэ:

css

.элемент {
  filter: blur(4px) brightness(0.8) contrast(1.2);
}

blur() — бүдгэрүүлэх

Гауссын бүдгэрүүлэлт. Утга их байх тусам илүү бүдэг:

css

.бүдэг {
  filter: blur(4px);
}

.их-бүдэг {
  filter: blur(12px);
}

/* Hover дээр тайлах */
.зургаа {
  filter: blur(6px);
  transition: filter 0.3s ease;
}

.зургаа:hover {
  filter: blur(0);
}

brightness() — гэрэлт байдал

1 — анхдагч. 0 — хар. 2 — хоёр дахин гэрэл:

css

.харлуулах {
  filter: brightness(0.5); /* бүдэг */
}

.гэрэлтүүлэх {
  filter: brightness(1.5); /* гэрэлтэй */
}

.хар {
  filter: brightness(0); /* бүрэн хар */
}

contrast() — тодрол

1 — анхдагч. 0 — саарал. 2 — хурц тодрол:

css

.бага-тодрол {
  filter: contrast(0.5);
}

.өндөр-тодрол {
  filter: contrast(2);
}

grayscale() — хар цагаан

0 — анхдагч өнгө. 1 буюу 100% — бүрэн хар цагаан:

css

.хар-цагаан {
  filter: grayscale(1);
}

/* Hover дээр өнгийг буцааx */
.зургаа {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.зургаа:hover {
  filter: grayscale(0);
}

hue-rotate() — өнгөний эргэлт

Өнгийн дугуй дээр хэдэн градус эргүүлэхийг тодорхойлно:

css

.өнгө-эргэх {
  filter: hue-rotate(90deg);
}

.урвуу-өнгө {
  filter: hue-rotate(180deg);
}

/* Аажмаар эргэх animation */
@keyframes өнгө-эргэлт {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.эргэх-өнгө {
  animation: өнгө-эргэлт 4s linear infinite;
}

opacity() — тунгалаг байдал

opacity property-тай ижил боловч GPU дээр өөр аргаар боловсруулдаг:

css

.тунгалаг {
  filter: opacity(0.5);
}

Тэмдэглэл: Ихэнх тохиолдолд opacity property ашиглах нь дээр.

saturate() — ханасан байдал

Өнгийн баялаг. 0 — хар цагаан. 1 — анхдагч. 2 — хэт ханасан:

css

.хуурай {
  filter: saturate(0.2);
}

.ханасан {
  filter: saturate(2.5);
}

sepia() — сепиа

Хуучин гэрэл зургийн хүрэн шаргал өнгийн эффект:

css

.хуучин {
  filter: sepia(1);
}

.хагас-хуучин {
  filter: sepia(0.5);
}

invert() — өнгө урвуулах

css

.урвуу {
  filter: invert(1); /* бүрэн урвуу */
}

.хагас-урвуу {
  filter: invert(0.5);
}

drop-shadow() — объектийн хэлбэрт сүүдэр

box-shadow-ийн адил боловч хайрцгийн биш объектийн жинхэнэ хэлбэрт сүүдэр нэмнэ. Ялангуяа PNG зурагт гайхалтай:

css

/* box-shadow — хайрцгаар */
.хайрцаг {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

/* drop-shadow — объектийн хэлбэрт */
.объект {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

css

.лого-png {
  filter: drop-shadow(0 4px 12px rgba(167, 139, 250, 0.5));
}

Олон filter давхарлах

css

.instagram-стиль {
  filter: brightness(1.1) contrast(1.1) saturate(1.3) sepia(0.2);
}

.кино-стиль {
  filter: contrast(1.2) brightness(0.9) saturate(0.8);
}

.нейморф {
  filter: blur(0) drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.4));
}

backdrop-filter — арын дэвсгэрт шүүлтүүр

filter-ийн адил боловч элемент ард байгаа агуулгад хэрэглэгддэг. Glass morphism эффектэд хамгийн их хэрэглэнэ:

css

.шил-карт {
  background: rgba(15, 23, 42, 0.6); /* тунгалаг дэвсгэр */
  backdrop-filter: blur(12px); /* арын бүдгэрүүлэлт */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
}

Өргөн хэрэглэгддэг backdrop-filter утгууд:

css

/* Бүдгэрүүлэх */
.nav {
  backdrop-filter: blur(8px);
}

/* Бүдгэрүүлэх + тодруулах */
.цонх {
  backdrop-filter: blur(10px) brightness(0.9);
}

/* Хар цагаан арын дэвсгэр */
.монохром {
  backdrop-filter: blur(6px) grayscale(1);
}

Бодит жишээ: Glass nav

css

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(11, 17, 32, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 24px;
  z-index: 100;
}

Гүйцэтгэлийн тайлбар

blur() ба backdrop-filter: blur() нь үнэтэй тооцоолол — хуудасны олон элементэд бүү хэрэглэ
Animating хийх үед will-change: filter тавь
backdrop-filter нь Firefox-д хуучин хувилбаруудад ажиллахгүй байсан — одоо дэмжигддэг

Дараагийн хичээлд:

overflow ба scroll — агуулга хэт их байхад хэрхэн зохицуулах, text-overflow: ellipsis, scroll-behavior зэргийг судална.

← Өмнөх хичээлGradient Дараах хичээл →Overflow ба scroll