การใช้งาน CSS Blend Modes

การใช้งาน CSS Blend Modes: ผสมผสานสีสันสร้างความน่าสนใจ

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

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

Blend Modes คืออะไร?

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

CSS Blend Modes มีอยู่ 2 ประเภทหลักๆ ที่เราจะพูดถึงในบทนี้:

background-blend-mode: ใช้สำหรับผสมสีพื้นหลังขององค์ประกอบ
mix-blend-mode: ใช้สำหรับผสมสีขององค์ประกอบกับองค์ประกอบอื่นๆ ที่อยู่ด้านล่าง

`background-blend-mode`: ผสมสีพื้นหลัง

background-blend-mode ใช้สำหรับผสมสีพื้นหลังขององค์ประกอบเข้าด้วยกัน เหมาะสำหรับกรณีที่เรามีพื้นหลังหลายชั้น เช่น รูปภาพและสีพื้นหลัง

รูปแบบการใช้งาน:

.element {
  background-image: url("image1.jpg"), url("image2.jpg"); /* กำหนดรูปภาพพื้นหลัง 2 รูป */
  background-color: rgba(0, 0, 0, 0.5); /* กำหนดสีพื้นหลัง (สีดำโปร่งแสง) */
  background-blend-mode: multiply; /* กำหนด Blend Mode */
}

ในตัวอย่างนี้ เรากำหนดรูปภาพพื้นหลัง 2 รูป และสีพื้นหลังเป็นสีดำโปร่งแสง จากนั้นใช้ background-blend-mode: multiply; เพื่อผสมสีทั้งหมดเข้าด้วยกัน

ค่าที่ใช้ได้สำหรับ background-blend-mode:

normal: (ค่าเริ่มต้น) ไม่มีการผสมสี
multiply: คูณสีของแต่ละเลเยอร์เข้าด้วยกัน ทำให้สีเข้มขึ้น
screen: สลับสีของแต่ละเลเยอร์แล้วคูณกัน ทำให้สีสว่างขึ้น
overlay: ผสมระหว่าง multiply และ screen โดยจะใช้ multiply กับสีที่เข้มกว่า 50% และ screen กับสีที่สว่างกว่า 50%
darken: เลือกสีที่เข้มที่สุดจากแต่ละเลเยอร์
lighten: เลือกสีที่สว่างที่สุดจากแต่ละเลเยอร์
color-dodge: ทำให้สีสว่างขึ้น โดยการหารสีพื้นหลังด้วยสีของเลเยอร์
color-burn: ทำให้สีเข้มขึ้น โดยการหารส่วนกลับของสีพื้นหลังด้วยส่วนกลับของสีของเลเยอร์
hard-light: ผสมระหว่าง multiply และ screen ขึ้นอยู่กับความสว่างของสีของเลเยอร์
soft-light: คล้ายกับ hard-light แต่ให้ผลลัพธ์ที่นุ่มนวลกว่า
difference: แสดงความแตกต่างระหว่างสีของแต่ละเลเยอร์
exclusion: คล้ายกับ difference แต่ให้ผลลัพธ์ที่อ่อนโยนกว่า
hue: ใช้สี (Hue) จากเลเยอร์บนสุด และใช้ความอิ่มตัว (Saturation) และความสว่าง (Luminosity) จากเลเยอร์ล่างสุด
saturation: ใช้ความอิ่มตัว (Saturation) จากเลเยอร์บนสุด และใช้สี (Hue) และความสว่าง (Luminosity) จากเลเยอร์ล่างสุด
color: ใช้สี (Hue) และความอิ่มตัว (Saturation) จากเลเยอร์บนสุด และใช้ความสว่าง (Luminosity) จากเลเยอร์ล่างสุด
luminosity: ใช้ความสว่าง (Luminosity) จากเลเยอร์บนสุด และใช้สี (Hue) และความอิ่มตัว (Saturation) จากเลเยอร์ล่างสุด

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

<div class="blend-example">
  <p>ข้อความตัวอย่าง</p>
</div>

.blend-example {
  width: 300px;
  height: 200px;
  background-image: url("https://via.placeholder.com/300x200"), linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
  background-blend-mode: multiply;
  color: white;
  text-align: center;
  line-height: 200px;
}

ในตัวอย่างนี้ เราใช้รูปภาพ placeholder และ linear gradient เป็นพื้นหลัง แล้วใช้ background-blend-mode: multiply; เพื่อผสมสีเข้าด้วยกัน ทำให้ข้อความสีขาวอ่านได้ชัดเจนขึ้น

`mix-blend-mode`: ผสมสีขององค์ประกอบ

mix-blend-mode ใช้สำหรับผสมสีขององค์ประกอบกับองค์ประกอบอื่นๆ ที่อยู่ด้านล่าง เหมาะสำหรับกรณีที่เราต้องการสร้างเอฟเฟกต์การผสมสีระหว่างองค์ประกอบต่างๆ บนหน้าเว็บ

รูปแบบการใช้งาน:

.element {
  mix-blend-mode: multiply; /* กำหนด Blend Mode */
}

ค่าที่ใช้ได้สำหรับ mix-blend-mode:

ค่าที่ใช้ได้สำหรับ mix-blend-mode จะเหมือนกับ background-blend-mode ทุกประการ

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

<div class="container">
  <img src="https://via.placeholder.com/300x200" alt="Image">
  <div class="overlay">
    <p>ข้อความทับซ้อน</p>
  </div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* สีดำโปร่งแสง */
  color: white;
  text-align: center;
  line-height: 200px;
  mix-blend-mode: lighten;
}

ในตัวอย่างนี้ เรามีรูปภาพและ div ที่มีสีดำโปร่งแสงทับอยู่ด้านบน เราใช้ mix-blend-mode: lighten; กับ div ที่ทับอยู่ ทำให้สีของ div ผสมกับสีของรูปภาพด้านล่าง ทำให้ข้อความสีขาวอ่านได้ชัดเจนขึ้น และยังเห็นรายละเอียดของรูปภาพได้อีกด้วย

ข้อควรระวังในการใช้งาน Blend Modes

Performance: การใช้ Blend Modes อาจส่งผลต่อ performance ของเว็บไซต์ โดยเฉพาะอย่างยิ่งเมื่อใช้กับองค์ประกอบที่มีขนาดใหญ่ หรือมีจำนวนมาก ควรทดสอบและตรวจสอบ performance อย่างสม่ำเสมอ
Browser Support: Blend Modes ได้รับการสนับสนุนจาก browsers สมัยใหม่ส่วนใหญ่ แต่ควรตรวจสอบ compatibility กับ browsers ที่เก่ากว่าก่อนใช้งานจริง สามารถตรวจสอบได้ที่ Can I use
Contrast: ควรระมัดระวังเรื่อง contrast เมื่อใช้ Blend Modes เพื่อให้แน่ใจว่าข้อความและองค์ประกอบอื่นๆ ยังคงอ่านได้ง่าย

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

สร้างเอฟเฟกต์ Text Overlay: ใช้ mix-blend-mode กับข้อความที่ทับบนรูปภาพ เพื่อให้ข้อความกลมกลืนไปกับรูปภาพมากขึ้น
สร้างเอฟเฟกต์ Hover: ใช้ background-blend-mode หรือ mix-blend-mode กับปุ่มหรือองค์ประกอบอื่นๆ เมื่อ hover เพื่อสร้างเอฟเฟกต์ที่น่าสนใจ
ข้อผิดพลาดที่พบบ่อย: ลืมกำหนดสีพื้นหลังหรือรูปภาพพื้นหลัง ทำให้ Blend Modes ไม่ทำงานตามที่คาดหวัง

สรุป

CSS Blend Modes เป็นเครื่องมือที่มีประโยชน์อย่างมากในการสร้างเอฟเฟกต์การผสมสีที่น่าสนใจให้กับเว็บไซต์ของเรา ลองนำไปประยุกต์ใช้กับโปรเจกต์ของคุณดูนะครับ!

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Shape ด้วย CSS กันครับ เตรียมตัวให้พร้อม!

การใช้งาน CSS Blend Modes