สร้างเสียงรบกวนจากข้อผิดพลาดการไล่ระดับสี CSS แปลก ๆ

👋 การสาธิตในบทความนี้ทำการทดลองกับข้อผิดพลาดที่ไม่ได้มาตรฐานที่เกี่ยวข้องกับการไล่ระดับสี CSS และการแสดงผลพิกเซลย่อย พฤติกรรมของพวกเขาอาจเปลี่ยนแปลงได้ตลอดเวลาในอนาคต พวกมันยังหนักเป็นห่าอีกด้วย เรากำลังให้บริการ async ที่คุณคลิกเพื่อโหลด แต่ยังต้องการแจ้งให้คุณทราบล่วงหน้าในกรณีที่พัดลมแล็ปท็อปของคุณเริ่มหมุน

คุณจำเสียงคงที่ในทีวีเครื่องเก่าที่ไม่มีสัญญาณได้หรือไม่? หรือเมื่อสัญญาณไม่ดีและภาพผิดเพี้ยน? ในกรณีที่แนวคิดเรื่องสัญญาณทีวีมาถึงคุณ นี่คือ GIF ที่แสดงให้เห็นว่าฉันหมายถึงอะไร

ดูภาพ (มีสื่อที่เล่นอัตโนมัติ)

ใช่ เราจะทำสิ่งนี้โดยใช้ CSS เท่านั้น นี่คือสิ่งที่เรากำลังทำ:

ก่อนที่เราจะเริ่มเจาะลึกโค้ด ฉันอยากจะบอกว่ามีวิธีที่ดีกว่าในการสร้างเอฟเฟ็กต์เสียงรบกวนแบบคงที่มากกว่าวิธีที่ฉันจะแสดงให้คุณเห็น เราสามารถใช้ SVG, ที่ filter ทรัพย์สิน ฯลฯ อันที่จริง จิมมี่ ชิออนเขียนก บทความที่ดี แสดงวิธีทำด้วย SVG

สิ่งที่ฉันจะทำที่นี่คือการทดลอง CSS เพื่อสำรวจเทคนิคบางอย่างที่ใช้ประโยชน์จากจุดบกพร่องด้วยการไล่ระดับสี คุณสามารถใช้มันในโครงการด้านข้างของคุณเพื่อความสนุกสนาน แต่การใช้ SVG นั้นสะอาดกว่าและเหมาะสำหรับโครงการจริงมากกว่า นอกจากนี้ เอฟเฟ็กต์จะทำงานแตกต่างกันในเบราว์เซอร์ต่างๆ ดังนั้นหากคุณจะตรวจสอบสิ่งเหล่านี้ จะเป็นการดีที่สุดที่จะดูใน Chrome, Edge หรือ Firefox

ขอเสียงหน่อย!

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

"เคล็ดลับ" ขึ้นอยู่กับความจริงที่ว่าการไล่ระดับสีนั้นไม่ดีในการลบรอยหยัก คุณรู้ไหมว่าขอบหยักที่เราได้รับเมื่อใช้สีหยุดยาก ใช่ ฉันพูดถึงพวกเขาเป็นส่วนใหญ่ บทความของฉัน เนื่องจากพวกมันน่ารำคาญเล็กน้อยและเราจำเป็นต้องเพิ่มหรือลบพิกเซลเล็กน้อยเสมอเพื่อทำให้สิ่งต่างๆ ราบรื่น:

อย่างที่คุณเห็น วงกลมที่สองแสดงผลได้ดีกว่าวงกลมแรกเนื่องจากมีความแตกต่างกันเล็กน้อย (0.5%) ระหว่างสองสีในการไล่ระดับสี แทนที่จะใช้การหยุดสีแบบแข็งขึ้นตรงๆ โดยใช้ค่าจำนวนเต็มเช่นวงกลมวงแรก

ลองดูอีกครั้ง คราวนี้ใช้ a conic-gradient ซึ่งผลลัพธ์จะชัดเจนกว่า:

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

คุณเห็นไหมว่าสุดท้ายแย่แค่ไหน? มันเป็นสัญญาณรบกวนตรงกลางและไม่มีอะไรราบรื่น มาทำให้เต็มหน้าจอด้วยค่าที่น้อยลง:

ฉันคิดว่าคุณจะเห็นว่าสิ่งนี้เกิดขึ้นที่ไหน เราได้ภาพที่บิดเบี้ยวแปลกๆ เมื่อเราใช้ค่าทศนิยมที่น้อยมากสำหรับการหยุดสีแบบแข็งในการไล่ระดับสี เสียงของเราบังเกิด!

เรายังห่างไกลจากสัญญาณรบกวนที่เป็นเม็ดเล็กๆ ที่เราต้องการ เพราะเรายังเห็นการไล่ระดับสีแบบกรวยที่แท้จริงได้ แต่เราสามารถลดค่าให้เล็กมากๆ ได้ เช่น 0.0001% — และในทันใดก็ไม่มีการไล่ระดับสีอีกต่อไปแต่มีความเป็นเม็ดที่บริสุทธิ์:

ธาดา! เรามีเอฟเฟ็กต์เสียงและต้องใช้การไล่ระดับสี CSS หนึ่งรายการเท่านั้น ฉันพนันได้เลยว่าถ้าฉันแสดงให้คุณเห็นก่อนที่จะอธิบาย คุณจะไม่มีทางรู้เลยว่าคุณกำลังดูการไล่ระดับสีอยู่ คุณต้องดูอย่างระมัดระวังที่กึ่งกลางของการไล่ระดับสีเพื่อดู

เราสามารถเพิ่มความสุ่มได้โดยการทำให้ขนาดของ Gradient ใหญ่ขึ้นในขณะที่ปรับตำแหน่งของมัน:

การไล่ระดับสีถูกนำไปใช้กับค่าคงที่ 3000px สี่เหลี่ยมและวางไว้ที่ 60% 60% พิกัด. เราแทบจะไม่สามารถสังเกตเห็นจุดศูนย์กลางในกรณีนี้ได้ สามารถทำได้เช่นเดียวกันกับการไล่ระดับสีในแนวรัศมีเช่นกัน:

และเพื่อให้สิ่งต่าง ๆ สุ่มมากขึ้น (และใกล้เคียงกับเอฟเฟกต์เสียงจริง) เราสามารถผสมผสานทั้งการไล่ระดับสีและการใช้งาน background-blend-mode เพื่อให้สิ่งต่าง ๆ ราบรื่น:

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

ตอนนี้เรามีสิ่งนี้แล้ว เรามาดูตัวอย่างที่น่าสนใจสองสามตัวอย่างที่เราอาจนำไปใช้

เคลื่อนไหวไม่มีสัญญาณทีวี

กลับไปที่การสาธิตที่เราเริ่มต้นด้วย:

หากคุณตรวจสอบโค้ด คุณจะเห็นว่าฉันใช้ภาพเคลื่อนไหว CSS ในการไล่ระดับสีแบบใดแบบหนึ่ง มันง่ายอย่างนั้นจริงๆ! ทั้งหมดที่เราทำคือย้ายตำแหน่งของการไล่ระดับสีรูปกรวยในช่วงเวลาที่รวดเร็วปานสายฟ้าแลบ (.1s) และนี่คือสิ่งที่เราได้รับ!

ฉันใช้เทคนิคเดียวกันนี้กับความท้าทายศิลปะ CSS หนึ่ง div:

ฟิลเตอร์ภาพเกรน

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

ฉันใช้การไล่ระดับสีเพียงสีเดียวบนองค์ประกอบเทียมและผสมผสานเข้ากับภาพ ขอบคุณ mix-blend-mode: overlay.

เราสามารถได้รับเอฟเฟกต์ที่สนุกสนานยิ่งขึ้นหากเราใช้ CSS filter คุณสมบัติ

และถ้าเราเพิ่ม mask ในการผสม เราสามารถสร้างเอฟเฟ็กต์ได้มากขึ้น!

การรักษาข้อความแบบเกรน

เราสามารถใช้เอฟเฟกต์เดียวกันนี้กับข้อความได้เช่นกัน อีกครั้ง สิ่งที่เราต้องมีก็คือการไล่ระดับสีแบบโยงสองสามครั้งบน a background-image แล้วผสมผสานพื้นหลัง ข้อแตกต่างเพียงอย่างเดียวคือเรากำลังเข้าถึง background-clip ดังนั้นเอฟเฟกต์จึงใช้กับขอบเขตของตัวละครแต่ละตัวเท่านั้น

กำเนิดศิลปะ

หากคุณยังคงเล่นกับค่าการไล่ระดับสี คุณอาจได้ผลลัพธ์ที่น่าประหลาดใจมากกว่าเอฟเฟกต์เสียงธรรมดา เราจะได้รูปทรงสุ่มที่ดูคล้ายกันมาก กำเนิดศิลปะ!

แน่นอนว่าเรายังห่างไกลจากศิลปะเชิงกำเนิดที่แท้จริง ซึ่งต้องใช้ความพยายามอย่างมาก แต่ก็ยังน่าพอใจที่ได้เห็นสิ่งที่สามารถทำได้ด้วยบางสิ่งที่ถือว่าเป็นจุดบกพร่องทางเทคนิค!

ใบหน้ามอนสเตอร์

ตัวอย่างสุดท้ายที่ฉันทำ รหัสปากกาของ คอลเลกชัน divtober 2022:

ตัดขึ้น

ฉันหวังว่าคุณจะสนุกกับการทดลอง CSS เล็กน้อยนี้ เราไม่ได้เรียนรู้สิ่งที่ "ใหม่" เสียทีเดียว แต่เราใช้ความแปลกเล็กน้อยด้วยการไล่ระดับสีและทำให้มันกลายเป็นเรื่องสนุก ฉันจะพูดอีกครั้ง: นี่ไม่ใช่สิ่งที่ฉันจะพิจารณาใช้กับโครงการจริง เพราะใครจะรู้ได้ว่าการลบรอยหยักจะได้รับการแก้ไขในบางช่วงเวลาหรือไม่ แต่นี่เป็นเรื่องบังเอิญและน่าประหลาดใจมากเมื่อฉันบังเอิญเจอมัน มันไม่ง่ายที่จะควบคุมและทำงานไม่สอดคล้องกันในเบราว์เซอร์

นี้กล่าวว่าฉันอยากรู้ว่าคุณจะทำอย่างไรกับมัน! คุณสามารถเล่นกับค่าต่างๆ รวมเลเยอร์ต่างๆ ใช้ a filter,หรือ mix-blend-modeหรืออะไรก็ตาม แล้วคุณจะได้อะไรเจ๋งๆ แน่นอน แบ่งปันผลงานสร้างสรรค์ของคุณในส่วนความคิดเห็น — ไม่มีรางวัล แต่เราสามารถรับคอลเลกชันที่ดีได้!