แท็กสีด้วย Javascript

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

มาทำให้แท็กแต่ละแท็กมีสีที่แตกต่างกัน และเนื่องจากเราเป็นนักพัฒนา เรามาทำโค้ดกันดีกว่า!

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

เปลี่ยนข้อความให้เป็นตัวเลข

เราได้รับแรงบันดาลใจจากเทคนิคที่เรียกว่าการแฮช

การแฮชคือกระบวนการแปลงคีย์ที่กำหนดหรือสตริงอักขระให้เป็นค่าอื่น

ในกรณีของเรา อินพุตเป็นสตริงและเอาต์พุตควรเป็นตัวเลข คุณสามารถรับการใช้งานฟังก์ชันแฮชที่มีอยู่ได้ แต่คุณยังสามารถเขียนของคุณเองเพื่อการควบคุมที่มากขึ้น ที่ฉันใช้มีลักษณะดังนี้:

function hash(text: string): number {
    if (!text) return 0

    let state = 13 // prime
    for (let index = 0; index < text.length; index++) {
        const charCode: number = text.charCodeAt(index);
        state += state * charCode;
        // Prevent overflow by %
        state %= (charCode * 3109) // prime
    }
    return state;
}

เป้าหมายของกระบวนการนี้คือเพื่อให้ได้ตัวเลขสุ่มสำหรับการป้อนข้อความของเรา จากนั้นคุณสามารถใช้ค่านั้นเพื่อสร้างสีด้วยฟังก์ชัน hsv หรือ rgb หรือเป็นดัชนีสำหรับการเลือกสีจากอาร์เรย์สี!

ฟังก์ชันแฮชไม่ได้ถูกสร้างขึ้นเท่ากันทั้งหมด

นี่ไม่ใช่เรื่องน่าแปลกใจ แต่วิธีการบางอย่างอาจจะดีกว่าการเลือกสีมากกว่าวิธีอื่นๆ

ตัวอย่างเช่น การใช้งาน JS เป็นที่นิยมมาก ของ "ฟังก์ชัน Java hash" ทำงานได้ไม่ดีนักในการเลือกจากอาร์เรย์สีเล็กๆ มีรูปแบบที่มองเห็นได้ชัดเจน - คอลัมน์สว่างและแถวที่มีสีคล้ายกัน - ซึ่งไม่ดีนัก

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

สีที่คัดสรรด้วยมือและสีที่สร้างขึ้น

เราอยู่ที่ทางแยกที่นี่ คุณจะทำตามขั้นตอนทั้งหมดและสร้างสีของคุณด้วย — หรือคุณเพียงแค่เลือกจากชุดสีที่เลือก

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

เราเลือกสีเริ่มต้นของ Tailwind ทั้งหมดด้วยมือ ปรับสมดุลด้วยตาอย่างพิถีพิถัน และทดสอบในการออกแบบจริงเพื่อให้แน่ใจว่าเราพอใจกับสีเหล่านั้น

มีมีวิธีในการสร้างสี

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

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

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

สารละลาย? เลือกใช้แนวทางแบบพาเลท

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

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

ฉันเองขโมยสีของฉันจาก Tailwind — ทุกรูปแบบที่สว่างตั้งแต่ 400 ถึงประมาณ 700 ความมืด พวกมันจะถูกเก็บไว้อย่างปลอดภัยในอาเรย์ และฉันก็หยิบมาหนึ่งอันทุกครั้งที่ต้องการ!

การสร้างแท็กจริง

เมื่อคุณเลือกสีได้แล้ว คุณจะถึงบ้านทันที เพียงตั้งค่าเป็น background-color ของแท็กในรูปแบบ CSS หรืออินไลน์

หากคุณต้องการข้อความสีขาว (เช่นฉัน) ฉันขอแนะนำให้ใส่ข้อความแท็กของคุณเป็นเงาเล็กน้อย ทำให้อ่านง่ายขึ้นและโดดเด่นด้วยสีสันสดใสยิ่งขึ้น! การตั้งค่าแท็กทั้งหมดของฉันมีลักษณะดังนี้:

function tagColor(text) {
  return palette[hash(text) % palette.length];
}
// ...
<span 
  style={{ background: tagColor(text), textShadow: "1px 1px 0px black" }}
>
  {text}
</span>

ตอนนี้เมื่อคุณเพิ่มแท็กให้กับบทความใหม่ล่าสุดของคุณ — มันจะให้สีสันที่สวยงามในตัวมันเอง!

หากคุณได้เรียนรู้อะไรบางอย่างในบทความนี้ ปรบมือ 👏 หรือติดตามจะยินดีเป็นอย่างยิ่ง! ขอบคุณที่อ่าน! ❤️

เผยแพร่ครั้งแรกที่ https://www.vojtechstruhar.com.