โหมดการผสม

พอดแคสต์ CSS - 024: Blend Modes

Duotone คือตัวเลือกสีที่ได้รับความนิยมสำหรับการถ่ายภาพ ซึ่งทำให้รูปภาพดูเหมือนมีสีที่ตัดกันเพียง 2 สีเท่านั้น โดยที่รูปหนึ่งใช้ไฮไลต์และอีกสีสำหรับแสงน้อย แล้วคุณจะนำ CSS ไปใช้ได้อย่างไร

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

โหมดผสานคืออะไร

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

คุณสามารถใช้โหมดผสานส่วนใหญ่ที่มีในเครื่องมือออกแบบด้วย CSS ได้โดยใช้พร็อพเพอร์ตี้ mix-blend-mode หรือ background-blend-mode mix-blend-mode ใช้การผสานกับองค์ประกอบทั้งหมด ส่วน background-blend-mode ใช้การผสานกับพื้นหลังขององค์ประกอบ

คุณใช้ background-blend-mode ได้เมื่อมีพื้นหลังหลายพื้นหลังในองค์ประกอบหนึ่งๆ และต้องการให้ทั้งหมดกลมกลืนกัน

mix-blend-mode จะส่งผลต่อทั้งองค์ประกอบ รวมถึงองค์ประกอบสมมติ Use Case หนึ่งอยู่ในตัวอย่างเริ่มต้นของรูปภาพดูโอโทน ซึ่งมีการใช้เลเยอร์สีกับองค์ประกอบผ่านองค์ประกอบจำลอง

โหมดการรวมจะแบ่งออกเป็น 2 หมวดหมู่ ได้แก่ แบบแยกจากกันและแยกไม่ได้ โหมดผสมผสานที่แยกได้จะพิจารณาองค์ประกอบสีแต่ละอย่าง เช่น RGB ทีละรายการ โหมดผสมที่แยกไม่ได้จะพิจารณาคอมโพเนนต์สีทั้งหมดเท่าๆ กัน

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

mix-blend-mode

background-blend-mode

โหมดผสมผสานที่แยกจากกันได้

ปกติ

โหมดนี้เป็นโหมดการรวมที่เป็นค่าเริ่มต้น และไม่ได้เปลี่ยนแปลงวิธีที่องค์ประกอบจะกลมกลืนกับองค์ประกอบอื่นๆ แต่อย่างใด

คูณ

โหมดผสาน multiply เหมือนกับการเรียงความโปร่งแสงหลายด้านซ้อนกัน พิกเซลสีขาวจะแสดงแบบโปร่งใส และพิกเซลสีดำจะปรากฏเป็นสีดำ ค่าที่อยู่ตรงกลางจะคูณค่าความสว่าง (แสง) ซึ่งหมายความว่าแสงจะสว่างขึ้นและมืดมาก มืดกว่ามาก โดยส่วนมากจะให้ผลลัพธ์สีเข้ม

.my-element {
  mix-blend-mode: multiply;
}

หน้าจอ

การใช้ screen จะคูณค่าแสง ซึ่งเป็นผลผกผันกับ multiply และมักจะทำให้ได้ผลลัพธ์ที่สว่างขึ้น

.my-element {
  mix-blend-mode: screen;
}

ซ้อนทับ

โหมดผสาน overlay จะผสมmultiplyและscreenเข้าด้วยกัน สีเบสเข้มจะเข้มขึ้น ส่วนสีอ่อนเข้มจะอ่อนลง สีระดับกลาง เช่น สีเทา 50% จะไม่ได้รับผลกระทบ

.my-element {
  mix-blend-mode: overlay;
}

ปรับให้มืด

โหมดผสาน darken จะเปรียบเทียบความสว่างสีเข้มของรูปภาพต้นฉบับและรูปภาพฉากหลัง แล้วเลือกความสว่างจากทั้ง 2 แบบ โดยการเปรียบเทียบค่า RGB แทนที่จะเป็นความสว่าง (อย่างที่ multiply และ screen แสดง) สำหรับแต่ละช่องสี เมื่อใช้ darken และ lighten ค่าสีใหม่มักจะสร้างขึ้นจากขั้นตอนการเปรียบเทียบนี้

.my-element {
  mix-blend-mode: darken;
}

ทำให้สว่างขึ้น

การใช้ lighten จะตรงข้ามกับ darken

.my-element {
  mix-blend-mode: lighten;
}

ดอดจ์สี

หากใช้ color-dodge ระบบจะทำให้สีพื้นหลังจางลงเพื่อแสดงสีของแหล่งที่มา สีดำสนิทจะไม่มีผลจากโหมดนี้

.my-element {
  mix-blend-mode: color-dodge;
}

คัลเลอร์เบิร์น

โหมดผสาน color-burn คล้ายกับโหมดผสาน multiply มาก แต่จะเพิ่มคอนทราสต์ทำให้โทนสีกลางที่อิ่มตัวมากขึ้นและไฮไลต์ลดลง

.my-element {
  mix-blend-mode: color-burn;
}

แสงเข้ม

การใช้ hard-light จะสร้างคอนทราสต์ที่สดใส โหมดผสานนี้จะเลือกหน้าจอหรือคูณค่าความสว่าง ถ้าค่าพิกเซลอ่อนกว่าสีเทา 50% รูปภาพจะสว่างขึ้นราวกับถูกสกรีน หากสีเข้มกว่าจะคูณ

.my-element {
  mix-blend-mode: hard-light;
}

แสงนวล

โหมดผสาน soft-light เป็น overlay เวอร์ชันที่มีความเข้มงวดน้อยกว่า โดยจะทำงานเหมือนกันอย่างมากโดยมีคอนทราสต์น้อยลง

.my-element {
  mix-blend-mode: soft-light;
}

ความแตกต่าง

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

.my-element {
  mix-blend-mode: difference;
}

การยกเว้น

การใช้ exclusion คล้ายกับ difference มาก แต่แทนที่จะแสดงเป็นสีดำในพิกเซลที่เหมือนกัน การแสดงผลจะเป็นสีเทา 50% ทำให้ได้เอาต์พุตที่นุ่มนวลขึ้นโดยมีคอนทราสต์น้อยลง

.my-element {
  mix-blend-mode: exclusion;
}

โหมดผสานที่แยกจากกันไม่ได้

โหมดผสานเหล่านี้ก็คล้ายกับคอมโพเนนต์สี HSL แต่ละค่าจะนำค่าคอมโพเนนต์ที่เฉพาะเจาะจงจากเลเยอร์ที่มีการใช้งานและผสมค่าดังกล่าวกับค่าคอมโพเนนต์อื่นๆ

โทนสี

โหมดผสาน hue จะนำโทนสีของสีต้นฉบับไปใช้กับความอิ่มตัวและความสว่างของสีฉากหลัง

.my-element {
  mix-blend-mode: hue;
}

ความอิ่มตัว

วิธีนี้เหมือนกับ hue แต่การใช้ saturation เนื่องจากโหมดผสานจะนำความอิ่มตัวของสีต้นฉบับไปใช้กับโทนสีและความสว่างของสีฉากหลัง

.my-element {
  mix-blend-mode: saturation;
}

สี

โหมดผสาน color จะสร้างสีจากโทนสีและความอิ่มตัวของสีต้นฉบับและความสว่างของสีฉากหลัง

.my-element {
  mix-blend-mode: color;
}

กำลังส่องสว่าง

สุดท้าย luminosity จะผกผันของ color โดยจะสร้างสีที่มีความสว่างของสีต้นทาง รวมถึงโทนสีและความอิ่มตัวของสีฉากหลัง

.my-element {
  mix-blend-mode: luminosity;
}

พร็อพเพอร์ตี้ isolation

หากคุณตั้งค่าพร็อพเพอร์ตี้ isolation ให้มีค่าเป็น isolate พร็อพเพอร์ตี้จะสร้างบริบทการซ้อนใหม่ ซึ่งจะทำให้ไม่กลมกลืนกับเลเยอร์ฉากหลัง ตามที่คุณได้เรียนรู้ในโมดูลดัชนี z เมื่อสร้างบริบทซ้อนกันใหม่ เลเยอร์นั้นจะกลายเป็นเลเยอร์ฐาน ซึ่งหมายความว่าจะไม่มีการใช้โหมดการรวมในระดับหลักอีกต่อไป แต่องค์ประกอบภายในองค์ประกอบที่มีชุด isolation: isolate จะยังคงยังคงผสมผสานกันได้

โปรดทราบว่าวิธีนี้ใช้ไม่ได้กับ background-blend-mode เนื่องจากมีการแยกพร็อพเพอร์ตี้พื้นหลังอยู่แล้ว

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับโหมดผสมผสาน