Tạo bộ lọc ảnh (image filters) với CSS (blur, contrast, brightness)

CSS Filter Effects - Bộ lọc hình ảnh

Thuộc tính filter áp dụng **hiệu ứng đồ họa** (blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, saturate, drop-shadow) lên element. Hỗ trợ tiền tố `-webkit-` cho Safari cũ.

10 Hàm Filter chính

Hàm	Mô tả	Giá trị	Mặc định
`blur(px)`	Làm mờ	`0` - ∞	0
`brightness(%)`	Độ sáng	`0%` (đen) - `100%` (gốc) - `>100%` (sáng hơn)	100%
`contrast(%)`	Độ tương phản	`0%` (xám) - `100%` (gốc) - `>100%` (tăng tương phản)	100%
`grayscale(%)`	Đen trắng	`0%` - `100%`	0%
`sepia(%)`	Nâu cũ (sepia)	`0%` - `100%`	0%
`hue-rotate(deg)`	Xoay màu sắc	`0deg` - `360deg`	0deg
`invert(%)`	Đảo ngược màu	`0%` - `100%`	0%
`opacity(%)`	Độ trong suốt	`0%` - `100%`	100%
`saturate(%)`	Độ bão hòa	`0%` (xám) - `100%` (gốc) - `>100%` (sôi động)	100%
`drop-shadow()`	Bóng theo hình dạng (alpha)	Giống box-shadow nhưng tuân theo shape	-

Ví dụ: Blur, Contrast, Brightness

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      height: auto;
      float: left;           /* Cũ, hiện nay dùng flex/grid */
      margin-right: 10px;
    }
    .contrast {
      filter: contrast(180%);       /* Tăng tương phản 1.8x */
      -webkit-filter: contrast(180%);
    }
    .brightness {
      filter: brightness(250%);     /* Sáng gấp 2.5 lần */
      -webkit-filter: brightness(250%);
    }
    .blur {
      filter: blur(4px);            /* Làm mờ 4px */
      -webkit-filter: blur(4px);
    }
    .grayscale { filter: grayscale(100%); }
    .sepia { filter: sepia(100%); }
    .hue-rotate { filter: hue-rotate(90deg); }
    .invert { filter: invert(100%); }
    .saturate { filter: saturate(200%); }
  </style>
</head>
<body>
  <img src="course_19_image.png" alt="Animation Training" width="200" height="200">
  <img class="contrast" src="course_19_image.png" alt="Contrast 180%" width="200" height="200">
  <img class="brightness" src="course_19_image.png" alt="Brightness 250%" width="200" height="200">
  <img class="blur" src="course_19_image.png" alt="Blur 4px" width="200" height="200">
</body>
</html>

Kết hợp nhiều Filter

.vintage {
  filter: sepia(30%) contrast(120%) brightness(90%) hue-rotate(-10deg);
}

.dramatic {
  filter: contrast(150%) saturate(150%) brightness(90%);
}

.ghost {
  filter: grayscale(100%) opacity(50%) blur(1px);
}

Animation Filter

@keyframes pulseGlow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.3) saturate(1.5) drop-shadow(0 0 10px gold); }
}
.pulse:hover { animation: pulseGlow 1s ease-in-out infinite; }

Backdrop-filter (Kính mờ - Glassmorphism)

.glass {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);  /* Làm mờ NỀN ĐỤNG SAU element */
  border: 1px solid rgba(255,255,255,0.2);
}

Lưu ý hiệu suất

`filter` chạy trên **GPU** (thường) - tốt cho animation.
`blur()` tốn kém nhất - hạn chế radius lớn (>10px) trên element lớn.
`drop-shadow()` thay vì `box-shadow` cho PNG transparent/SVG.
Kết hợp nhiều filter trong 1 declaration: `filter: f1() f2() f3();` hiệu quả hơn multiple properties.