การไล่ระดับสี

The CSS Podcast - 021: ไล่ระดับสี

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

ตอนแรกคุณอาจคิดว่าจะต้องส่งออกรูปภาพจากเครื่องมือออกแบบเพื่อดำเนินการนี้ แต่คุณใช้ linear-gradient แทนได้

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

การไล่ระดับสีแบบเส้นตรง

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

.my-element {
    background: linear-gradient(black, white);
}

นอกจากนี้ คุณยังส่งมุมหรือคีย์เวิร์ดที่แสดงถึงมุมได้ด้วย หากเลือกใช้คีย์เวิร์ด ให้ระบุทิศทางหลังคีย์เวิร์ด to ซึ่งหมายความว่าหากต้องการการไล่ระดับสีที่เป็นสีดําและขาวซึ่งวิ่งจากซ้าย (ดํา) ไปขวา (ขาว) คุณจะต้องระบุมุมเป็น to right เป็นอาร์กิวเมนต์แรก

.my-element {
    background: linear-gradient(to right, black, white);
}

ค่าจุดสิ้นสุดของสีที่กําหนดว่าสีจะหยุดและผสมกับสีข้างเคียงที่ใด สำหรับไล่ระดับสีที่เริ่มต้นด้วยสีแดงเข้มที่วิ่งเป็นมุม 45 องศา เมื่อไล่ระดับสีมีขนาด 30% แล้วจะเปลี่ยนเป็นสีแดงอ่อน ลักษณะจะเหมือนกับภาพนี้

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

คุณเพิ่มสีและจุดหยุดสีใน linear-gradient() ได้มากเท่าที่ต้องการ และวางเลเยอร์การไล่ระดับสีซ้อนกันได้โดยคั่นการไล่ระดับสีแต่ละรายการด้วยเครื่องหมายคอมมา

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

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

.my-element {
    background: radial-gradient(white, black);
}

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

• closest-corner จะพบกับมุมที่ใกล้ที่สุดกับจุดศูนย์กลางของไล่ระดับ
• closest-side จะบรรจบกับด้านข้างของกล่องที่อยู่ใกล้กับจุดศูนย์กลางของไล่ระดับสีมากที่สุด
• farthest-side จะทําตรงข้ามกับ closest-side

คุณเพิ่มจุดสีได้มากเท่าที่ต้องการ เช่นเดียวกับ linear-gradient ในทำนองเดียวกัน คุณสามารถเพิ่มradial-gradientsได้มากเท่าที่ต้องการ

การไล่ระดับสีรูปกรวย

การไล่ระดับสีรูปกรวยจะมีจุดศูนย์กลางในกล่องและเริ่มจากด้านบน (โดยค่าเริ่มต้น) และวนเป็นวงกลม 360 องศา

.my-element {
    background: conic-gradient(white, black);
}

ฟังก์ชัน conic-gradient() ยอมรับอาร์กิวเมนต์ตำแหน่งและมุม

โดยค่าเริ่มต้น มุมจะเป็น 0 องศาซึ่งเริ่มจากด้านบนตรงกลาง หากตั้งค่ามุมเป็น 45deg จะเป็นมุมขวาบน อาร์กิวเมนต์มุมยอมรับค่ามุมประเภทใดก็ได้ เช่น การไล่ระดับสีเชิงเส้นและการไล่ระดับสีแบบรัศมี

ตำแหน่งจะเป็นกึ่งกลางโดยค่าเริ่มต้น เช่นเดียวกับการไล่ระดับสีแบบรัศมีและแบบเส้นตรง การวางตำแหน่งอาจอิงตามคีย์เวิร์ด หรือจะกําหนดด้วยค่าตัวเลขก็ได้

คุณสามารถเพิ่มจุดหยุดสีได้มากเท่าที่ต้องการ เช่นเดียวกับไล่ระดับสีประเภทอื่นๆ Use Case ที่เหมาะสําหรับความสามารถนี้ด้วยไล่ระดับสีรูปกรวยคือการเรนเดอร์แผนภูมิวงกลมด้วย CSS

การทำซ้ำและการผสม

ไล่ระดับสีแต่ละประเภทยังมีประเภทที่ซ้ำกันด้วย ดังนี้ repeating-linear-gradient(), repeating-radial-gradient() และ repeating-conic-gradient() ฟังก์ชันเหล่านี้คล้ายกับฟังก์ชันที่ไม่ซ้ำกันและใช้อาร์กิวเมนต์เดียวกัน ความแตกต่างคือหากไล่ระดับสีที่กําหนดไว้ใช้ซ้ำเพื่อเติมเต็มกล่องได้ ระบบก็จะใช้ตามขนาดของทั้ง 2 กล่อง

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

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

นอกจากนี้ คุณยังผสมฟังก์ชันไล่ระดับสีในพร็อพเพอร์ตี้ background ได้ รวมถึงกำหนดไล่ระดับสีได้มากเท่าที่ต้องการ เช่นเดียวกับที่ใช้กับภาพพื้นหลัง เช่น คุณอาจผสม linear-gradient หลายรายการเข้าด้วยกัน หรือใช้ linear-gradient 2 รายการร่วมกับการไล่สีแบบรัศมี

แหล่งข้อมูล

• Conic.css - ไลบรารีการไล่สีรูปกรวยที่มีประโยชน์
• คู่มือ MDN เกี่ยวกับไล่ระดับสี
• เครื่องมือสร้างการไล่ระดับสี

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับไล่ระดับสี