🎚️ตัวสร้างฟิลเตอร์ CSS

ฟังก์ชันและหน่วยของ filter

พร็อพเพอร์ตี้ filter ของ CSS คือพร็อพเพอร์ตี้ที่ใส่เอฟเฟกต์ให้กับรูปลักษณ์ของภาพหรือองค์ประกอบ โดยเขียนฟังก์ชันอย่าง blur หรือ sepia เรียงต่อกันด้วยเว้นวรรคครึ่งความกว้าง

• px (พิกเซล)：ฟังก์ชัน blur เป็นฟังก์ชันที่กำหนดรัศมีความเบลอเป็น px หากระบุ 4px สีจะกลมกลืนกันในรัศมี 4 พิกเซล
• % (เปอร์เซ็นต์)：ฟังก์ชัน brightness และ sepia เป็นฟังก์ชันที่กำหนดความแรงของเอฟเฟกต์เป็น % โดยในฟังก์ชัน brightness ค่า 100% คือความสว่างเดิม และ 120% คือสว่างขึ้น 20%
• deg (องศา)：ฟังก์ชัน hue-rotate เป็นฟังก์ชันที่กำหนดมุมหมุนสีบนวงล้อสีเป็น deg หากระบุ 180deg สีจะเปลี่ยนไปยังเฉดสีตรงข้าม

ทำไมลำดับการเขียนจึงทำให้ผลลัพธ์เปลี่ยน

ฟังก์ชันที่เรียงใน filter จะถูกนำไปใช้ตามลำดับจากซ้ายไปขวา โดยเอฟเฟกต์ถัดไปจะถูกใส่กับผลลัพธ์ของเอฟเฟกต์ก่อนหน้า ดังนั้นเมื่อสลับลำดับ ภาพที่ได้ก็อาจเปลี่ยนไป ตัวอย่างเช่น หากทำขาวดำก่อนแล้วค่อยใส่ซีเปีย จะยังมีสีน้ำตาลหลงเหลืออยู่ แต่หากใส่ซีเปียก่อนแล้วค่อยทำขาวดำ สีน้ำตาลจะหายไป เครื่องมือนี้กำหนดลำดับการใช้งานไว้ตายตัว แต่สามารถแก้ไขลำดับได้โดยแก้ไขโค้ด CSS ที่สร้างขึ้น

ความแตกต่างกับ backdrop-filter

filter และ backdrop-filter เป็นพร็อพเพอร์ตี้ที่ใช้ฟังก์ชันเดียวกันได้ แต่เป้าหมายที่ใส่เอฟเฟกต์นั้นแตกต่างกัน

• filter：filter เป็นพร็อพเพอร์ตี้ที่ใส่เอฟเฟกต์ให้กับรูปลักษณ์ขององค์ประกอบที่ระบุเอง (เช่น ภาพหรือข้อความ)
• backdrop-filter：backdrop-filter เป็นพร็อพเพอร์ตี้ที่ใส่เอฟเฟกต์ให้กับส่วนที่มองเห็นอยู่ด้านหลังขององค์ประกอบที่ระบุ ใช้สำหรับการแสดงผลแบบกระจกฝ้า