ตัวกรอง CSS คืออะไร?

ตัวกรอง CSS ช่วยให้คุณใช้เอฟเฟกต์กราฟิก เช่น เบลอหรือการเปลี่ยนสีกับองค์ประกอบ โดยทั่วไปจะใช้สําหรับรูปภาพ พื้นหลัง และเส้นขอบ

สามารถใช้ฟิลเตอร์เพื่อสร้างเอฟเฟกต์ภาพ ปรับปรุงรูปภาพ หรือสร้างองค์ประกอบการออกแบบที่ไม่เหมือนใครโดยไม่ต้องใช้เครื่องมือแก้ไขรูปภาพภายนอก

คุณสมบัติตัวกรอง CSS ที่รองรับ

• blur()- ใช้การเบลอแบบเกาส์เซียนกับองค์ประกอบ
• brightness()- ปรับความสว่างขององค์ประกอบ
• contrast()- ปรับคอนทราสต์ขององค์ประกอบ
• grayscale()- แปลงองค์ประกอบเป็นระดับสีเทา
• hue-rotate()- ใช้การหมุนเฉดสีกับองค์ประกอบ
• invert()- สลับสีขององค์ประกอบ
• opacity()- ปรับความทึบขององค์ประกอบ
• saturate()- ทําให้องค์ประกอบอิ่มตัวหรือลดความอิ่มตัว
• sepia()- แปลงองค์ประกอบเป็นซีเปีย

วิธีใช้ตัวกรอง

เมื่อใช้โค้ด CSS ที่สร้างโดยเครื่องมือนี้ คุณจะสามารถใช้ตัวกรองกับองค์ประกอบ HTML ใดก็ได้ นี่คือวิธี:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

ความเข้ากันได้ของเบราว์เซอร์

ตัวกรอง CSS ได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่ รวมถึง Chrome, Firefox, Safari, Edge และ Opera อย่างไรก็ตาม เบราว์เซอร์รุ่นเก่า เช่น Internet Explorer ไม่รองรับ