สไตล์ชีตกาแฟ: กาแฟเป็นสี

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

เราทุกคนรู้เกี่ยวกับ RGB, Hex (เช่น RGB) และ HSL (ซึ่งสิ่งที่ตลกก็คือ RGB ด้วย) และรูปแบบสีใหม่ๆ ก็ปรากฏขึ้นในมาตรฐาน CSS: L*a*b*, LCH, CMYK, HWB, OKLCH... มีหลายคนถามผมว่า “ทำไมเราถึงต้องการรูปแบบสีมากมายใน CSS? ” และนั่นเป็นคำถามที่ยุติธรรมที่ฉันจะพยายามตอบด้วยความช่วยเหลือของการ์ตูนในวันนี้ .

และฉันจะทำด้วยความช่วยเหลือของฟังก์ชันสี CSS ที่มีอยู่: HWB แม้ว่า HWB จะย่อมาจากH ue- W hiteness- Bขาดแคลน แต่ฉันได้แก้ไขความหมายตัวอักษร (เพียง) เล็กน้อยเพื่อให้เหมาะกับจุดประสงค์ของฉัน:

• H = น้ำร้อน = น้ำ ( duh )
• W = สีขาว = นม (ตีฟอง ตีฟอง นึ่ง ฯลฯ)
• B = ดำ = กาแฟ (อ้างอิงจาก Homer Simpson: สาเหตุและวิธีแก้ปัญหาของชีวิต)

แม้ว่าฉันจะชอบไอเดียนี้ แต่ก็มีข้อจำกัด: ถ้าเราต้องการมอคค่าล่ะ มอคค่ามีช็อคโกแลตและhwb()ไม่มีวิธีการแทนช็อคโกแลต มีแค่น้ำเปล่า นม และกาแฟเท่านั้น ด้วยส่วนผสมพื้นฐานทั้งสามนี้ เราเพียงแต่สร้างกาแฟบนอินโฟกราฟิกและอื่นๆ อีกมากมาย (เช่น คอร์ตาโด คาเฟ่บอมบง หรือกาเลา เป็นต้น) ถึงกระนั้น เรายังขาดอีกมาก: กาแฟไอริช เอสเปรสโซโรมาโน มาโรชิโน ฯลฯ และเราไม่สามารถสร้างมันขึ้นมาได้ด้วยน้ำเปล่า นม และกาแฟ

แม้แต่ตัวในการ์ตูนhwb()ฟังก์ชันที่เพิ่งสร้างมาของฉันยังไม่เพียงพอ ตัวอย่างเช่น ตรวจสอบคาปูชิโน่: เป็นนม 66% และกาแฟ 33% ดูเหมือนว่าจะทำให้เข้าใจผิดว่ามีองค์ประกอบเหมือนกับลาเต้ แต่ไม่เหมือนกัน: ในคาปูชิโน่ นมจะถูกนึ่งครึ่งหนึ่งและมีฟองครึ่งหนึ่ง

จะดีกว่าหากเรามีวิธีอื่นในการแสดงรายละเอียดเหล่านั้น และนั่นคือสิ่งที่เกิดขึ้นกับสี CSS ด้วย! เราใช้ RGB มานานแล้ว แต่ RGB นั้นมีข้อจำกัด โมดูลสี CSS ระดับ 4นำเสนอวิธีใหม่ในการเขียนสีที่ทำให้เว็บทันสมัยและนำโลกแห่งความเป็นไปได้: Lab, LCH, OKLCH, CMYK, ฟังก์ชันcolor()... และช่องว่างสีเหล่านั้นมีตัวเลือกมากกว่า RGB มาตรฐาน

ในกรณีของมอคค่า เราขาดช็อกโกแลต (ซึ่งไม่ใช่ตัวเลือกใน HWB)… ทำไมไม่ใช้ LCH แทนล่ะ

• L = Lightness/Leche/Lait/Latte = นม
• ซี = ช็อกโกแลต
• H = กาแฟร้อน

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

หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับฟังก์ชันสี ให้ตรวจสอบโดยตรงที่CSS Color Module 4 ( และระดับ 5สำหรับฟังก์ชันสีใหม่ๆ ที่ยอดเยี่ยม!) มันตรงไปตรงมาอย่างน่าประหลาดใจ คุณยังสามารถตรวจสอบบทความที่ฉันเผยแพร่เมื่อสองสามปีก่อน … แต่ขอเตือนว่ามันค่อนข้างล้าสมัยเนื่องจากมาตรฐานมีการเปลี่ยนแปลงอย่างต่อเนื่องตั้งแต่ฉันเขียน

ลิงค์

• ลิงก์ถาวร:https://comicss.art/?id=87
• ภาพ:https://comicss.art/comics/87/coffee-as-a-css-color.png
• รหัสแหล่งที่มา:https://comicss.art/comics/87/coffee-as-a-css-color.html