การทำงานกับ CSS3 Filter Effects

CSS Filter Effects: ปรับแต่งภาพ/องค์ประกอบแบบ Real-time

Property filter ใช้ฟังก์ชันต่างๆ กรองภาพ: blur(), brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia(), hue-rotate(), drop-shadow(), url() (SVG filter)

ฟังก์ชันหลักและค่า

Function	ค่า	ค่า Default
blur()	length (px, em)	0
brightness()	% หรือ number (1=100%)	1 (100%)
contrast()	% หรือ number	1 (100%)
grayscale()	% หรือ number (0-1)	0
invert()	% หรือ number (0-1)	0
opacity()	% หรือ number (0-1)	1 (100%)
saturate()	% หรือ number	1 (100%)
sepia()	% หรือ number (0-1)	0
hue-rotate()	angle (deg, rad)	0deg
drop-shadow()	x y blur color	-

โค้ดตัวอย่าง: Invert Filter

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    img { margin: 20px; width: 200px; height: 200px; }
    img.normal { margin-left: 30%; }
    img.filter { filter: invert(100%); }
  </style>
</head>
<body>
  <h1 style="text-align: center;">CSS3 Filter Effect</h1>
  <img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg">
  <img class="filter" src="https://i.picsum.photos/id/237/536/354.jpg">
</body>
</html>

รวมหลาย Filter (Chaining)

.vintage {
  filter: sepia(0.6) contrast(1.2) brightness(0.9) hue-rotate(-10deg);
}
.blur-bg {
  filter: blur(8px) brightness(0.7);
}

Performance & Tips

Filter ทำงานบน GPU – เร็ว แต่ใช้ VRAM
หลีกเลี่ยง filter บนองค์ประกอบใหญ่/หลายตัวพร้อมกัน
backdrop-filter กรองเฉพาะพื้นหลังด้านหลัง (glassmorphism)
ใช้ will-change: filter สำหรับ animation