เครื่องมือสร้าง CSS Gradient

ไล่ระดับสีคือรูปภาพ ไม่ใช่สี

ไล่ระดับสีของ CSS ถูกสร้างขึ้นโดยฟังก์ชัน linear-gradient, radial-gradient หรือ conic-gradient และแต่ละฟังก์ชันก็ให้ค่าเป็นรูปภาพ ไม่ใช่สี ข้อเท็จจริงเพียงข้อนี้อธิบายพฤติกรรมส่วนใหญ่ของไล่ระดับสีได้ เพราะผลลัพธ์เป็นรูปภาพ คุณจึงกำหนดมันให้กับพร็อพเพอร์ตีที่รับรูปภาพ ซึ่งส่วนใหญ่คือ background หรือ background-image และมันก็เรียงต่อกัน (tile) ปรับขนาด และซ้อนกันเหมือนพื้นหลังอื่น ๆ ทุกประการ อีกทั้งมันยังไม่มีขนาดในตัวเอง แต่จะเติมเต็มกล่องใดก็ตามที่คุณใส่มันลงไป ซึ่งเป็นเหตุผลที่ไล่ระดับสีเดียวกันอาจดูชันบนปุ่มแต่ดูนุ่มนวลเมื่อแผ่ไปทั่วส่วนฮีโร่ (hero section)

ไล่ระดับสีเชิงเส้นและทิศทาง

ไล่ระดับสีเชิงเส้นจะไล่สีไปตามแกนเส้นตรง คุณกำหนดแกนนั้นได้ด้วยมุมหรือด้วยคีย์เวิร์ดบอกทิศทาง มุมวัดตามเข็มนาฬิกาจากจุดที่ชี้ตรงขึ้น ดังนั้น 0deg จึงไล่จากล่างขึ้นบน 90deg ไล่จากซ้ายไปขวา และ 180deg ไล่จากบนลงล่าง รูปแบบคีย์เวิร์ดอย่าง to right หรือ to bottom right มักชัดเจนกว่าสำหรับกรณีง่าย ๆ และมีข้อดีตรงที่ชี้ไปยังมุมได้พอดี ซึ่งมุมแบบตายตัวทำไม่ได้เมื่อกล่องเปลี่ยนรูปทรง

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

ไล่ระดับสีแบบรัศมีและแบบกรวย

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

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

จุดสีและตำแหน่ง

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

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

จุดตัดคม: ลายเส้น แถบสี และรูปทรง

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

จับคู่จุดตัดคมกับ repeating-linear-gradient หรือ repeating-radial-gradient แล้วรูปแบบจะเรียงต่อกันทั่วทั้งกล่องโดยอัตโนมัติ คุณจึงสร้างลายเส้นลูกกวาด เทปกั้นเขตอันตรายแนวทแยง หรือเส้นไกด์บาง ๆ จากการประกาศสั้น ๆ เพียงชุดเดียวได้ เพราะมันเป็นคณิตศาสตร์เวกเตอร์ไม่ใช่บิตแมป มันจึงคงความคมกริบที่ทุกขนาดและทุกความหนาแน่นของพิกเซล

ความโปร่งใสและการซ้อนชั้น

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

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

การเข้าถึง: ข้อความบนไล่ระดับสี

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