การใช้งาน CSS Filters

การใช้งาน CSS Filters

ในบทเรียนก่อนหน้า เราได้เรียนรู้วิธีการสร้าง Tab Navigation อย่างง่ายด้วย CSS โดยใช้เทคนิค Radio Button และ :checked Pseudo-class คราวนี้เราจะมาเรียนรู้การเพิ่มลูกเล่นให้กับเว็บไซต์ของเราด้วย CSS Filters ซึ่งเป็นเครื่องมือที่ช่วยให้เราปรับแต่งภาพและองค์ประกอบต่างๆ ได้อย่างง่ายดายโดยไม่ต้องพึ่งโปรแกรมแต่งภาพ

CSS Filters ช่วยให้เราสามารถปรับแต่งภาพและองค์ประกอบต่างๆ ได้หลากหลายรูปแบบ เช่น การเบลอภาพ (blur), การปรับความสว่าง (brightness), การปรับคอนทราสต์ (contrast), การเปลี่ยนภาพเป็นขาวดำ (grayscale) หรือซีเปีย (sepia) และอื่นๆ อีกมากมาย

CSS Filters คืออะไร?

CSS Filters คือคุณสมบัติ (property) ใน CSS ที่ช่วยให้เราสามารถใช้เอฟเฟกต์ต่างๆ กับองค์ประกอบ HTML ได้ เช่น ภาพ, กล่องข้อความ, หรือวิดีโอ โดยเอฟเฟกต์เหล่านี้จะถูกนำไปใช้ก่อนที่องค์ประกอบนั้นจะถูกแสดงผลบนหน้าจอ ทำให้เราสามารถปรับแต่งรูปลักษณ์ขององค์ประกอบได้อย่างง่ายดาย

คุณสมบัติ filter ใน CSS ใช้เพื่อกำหนด filter function อย่างน้อยหนึ่งฟังก์ชันให้กับ element โดย syntax พื้นฐานคือ:

filter: <filter-function> [<filter-function>];

โดย <filter-function> คือฟังก์ชันที่ใช้ในการปรับแต่ง เช่น blur(), brightness(), contrast() เป็นต้น เราสามารถใส่ filter function หลายๆ ตัวได้โดยคั่นด้วย space

ตัวอย่างการใช้งาน CSS Filters

เราจะมาดูตัวอย่างการใช้งาน CSS Filters ที่พบบ่อยกัน:

1. การเบลอภาพ (blur)

blur() filter ใช้เพื่อเบลอภาพ โดยค่าที่กำหนดคือรัศมีการเบลอ (blur radius) ยิ่งค่ามาก ภาพก็จะยิ่งเบลอมากขึ้น

<img src="image.jpg" class="blur" alt="Image with blur filter">

.blur {
  filter: blur(5px);
}

ในตัวอย่างนี้ ภาพที่มี class blur จะถูกเบลอด้วยรัศมี 5 พิกเซล

กรณีใช้งานจริง: ใช้เพื่อเบลอภาพพื้นหลังเพื่อให้ข้อความที่อยู่ด้านบนอ่านง่ายขึ้น หรือใช้เบลอภาพ thumbnail เพื่อซ่อนรายละเอียดก่อนที่ผู้ใช้จะคลิกเข้าไปดู

ข้อผิดพลาดที่พบบ่อย: การใช้ค่า blur() มากเกินไปอาจทำให้ภาพดูไม่ชัดเจนและทำให้ผู้ใช้รู้สึกไม่สบายตา ควรใช้ค่าที่เหมาะสมเพื่อให้ภาพยังคงดูน่าสนใจ

2. การปรับความสว่าง (brightness)

brightness() filter ใช้เพื่อปรับความสว่างของภาพ โดยค่าที่กำหนดคือตัวคูณ (multiplier) ถ้าค่าคือ 1 จะไม่มีการเปลี่ยนแปลง ถ้าค่ามากกว่า 1 ภาพจะสว่างขึ้น และถ้าค่าน้อยกว่า 1 ภาพจะมืดลง

<img src="image.jpg" class="brightness" alt="Image with brightness filter">

.brightness {
  filter: brightness(1.5);
}

ในตัวอย่างนี้ ภาพที่มี class brightness จะสว่างขึ้น 50%

กรณีใช้งานจริง: ใช้เพื่อปรับความสว่างของภาพให้เข้ากับโทนสีของเว็บไซต์ หรือใช้เพื่อทำให้ภาพเด่นขึ้นเมื่อผู้ใช้นำเมาส์ไปวาง (hover)

ข้อผิดพลาดที่พบบ่อย: การปรับความสว่างมากเกินไปอาจทำให้ภาพดูจืดชืดและสูญเสียรายละเอียด ควรใช้ค่าที่เหมาะสมเพื่อให้ภาพยังคงดูมีมิติ

3. การปรับคอนทราสต์ (contrast)

contrast() filter ใช้เพื่อปรับคอนทราสต์ของภาพ โดยค่าที่กำหนดคือตัวคูณ (multiplier) ถ้าค่าคือ 1 จะไม่มีการเปลี่ยนแปลง ถ้าค่ามากกว่า 1 คอนทราสต์จะสูงขึ้น และถ้าค่าน้อยกว่า 1 คอนทราสต์จะต่ำลง

<img src="image.jpg" class="contrast" alt="Image with contrast filter">

.contrast {
  filter: contrast(1.2);
}

ในตัวอย่างนี้ ภาพที่มี class contrast จะมีคอนทราสต์สูงขึ้น 20%

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

ข้อผิดพลาดที่พบบ่อย: การปรับคอนทราสต์มากเกินไปอาจทำให้ภาพดูแข็งกระด้างและสูญเสียรายละเอียด ควรใช้ค่าที่เหมาะสมเพื่อให้ภาพยังคงดูเป็นธรรมชาติ

4. การเปลี่ยนภาพเป็นขาวดำ (grayscale)

grayscale() filter ใช้เพื่อเปลี่ยนภาพเป็นขาวดำ โดยค่าที่กำหนดคือเปอร์เซ็นต์ (percentage) ถ้าค่าคือ 0% จะไม่มีการเปลี่ยนแปลง และถ้าค่าคือ 100% ภาพจะเป็นขาวดำสนิท

<img src="image.jpg" class="grayscale" alt="Image with grayscale filter">

.grayscale {
  filter: grayscale(100%);
}

ในตัวอย่างนี้ ภาพที่มี class grayscale จะถูกเปลี่ยนเป็นขาวดำสนิท

กรณีใช้งานจริง: ใช้เพื่อสร้างภาพลักษณ์ที่ดูคลาสสิก หรือใช้เพื่อเน้นองค์ประกอบบางอย่างในภาพ

ข้อผิดพลาดที่พบบ่อย: การใช้ grayscale() กับภาพที่มีสีสันสดใสอาจทำให้ภาพดูน่าเบื่อ ควรใช้กับภาพที่เหมาะสมเพื่อให้ได้ผลลัพธ์ที่ดี

5. การเปลี่ยนภาพเป็นซีเปีย (sepia)

sepia() filter ใช้เพื่อเปลี่ยนภาพเป็นโทนสีซีเปีย โดยค่าที่กำหนดคือเปอร์เซ็นต์ (percentage) ถ้าค่าคือ 0% จะไม่มีการเปลี่ยนแปลง และถ้าค่าคือ 100% ภาพจะเป็นซีเปียสนิท

<img src="image.jpg" class="sepia" alt="Image with sepia filter">

.sepia {
  filter: sepia(80%);
}

ในตัวอย่างนี้ ภาพที่มี class sepia จะถูกเปลี่ยนเป็นโทนสีซีเปีย 80%

กรณีใช้งานจริง: ใช้เพื่อสร้างภาพลักษณ์ที่ดูเก่าแก่ หรือใช้เพื่อเพิ่มความอบอุ่นให้กับภาพ

ข้อผิดพลาดที่พบบ่อย: การใช้ sepia() กับภาพที่ไม่เหมาะสมอาจทำให้ภาพดูไม่สวยงาม ควรใช้กับภาพที่เหมาะสมเพื่อให้ได้ผลลัพธ์ที่ดี

การใช้งาน CSS Filters ร่วมกัน

เราสามารถใช้ CSS Filters หลายๆ ตัวร่วมกันได้ โดยคั่นด้วย space ตัวอย่างเช่น:

.combined {
  filter: grayscale(50%) blur(3px) brightness(1.2);
}

ในตัวอย่างนี้ ภาพที่มี class combined จะถูกเปลี่ยนเป็นขาวดำ 50%, เบลอด้วยรัศมี 3 พิกเซล และสว่างขึ้น 20%

ข้อควรระวังในการใช้งาน CSS Filters

• Performance: การใช้ CSS Filters อาจส่งผลต่อ performance ของเว็บไซต์ โดยเฉพาะอย่างยิ่งถ้าใช้กับภาพขนาดใหญ่หรือใช้ filter หลายๆ ตัวร่วมกัน ควรทดสอบและปรับแต่งการใช้งานเพื่อให้เว็บไซต์ยังคงทำงานได้อย่างราบรื่น
• Browser Support: CSS Filters ได้รับการสนับสนุนจากเบราว์เซอร์สมัยใหม่ส่วนใหญ่ แต่ควรตรวจสอบความเข้ากันได้กับเบราว์เซอร์ที่เก่ากว่าก่อนใช้งาน

สรุป

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