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

พอดแคสต์ CSS - 021: Gradients

ลองจินตนาการว่าคุณมีไซต์สำหรับสร้าง ที่ด้านบนสุด จะมีบทนำพร้อมด้วยส่วนหัว สรุป และปุ่ม นักออกแบบได้มอบดีไซน์ที่มีพื้นหลังสีม่วงสำหรับช่วงอินโทรนี้ ปัญหาเดียวคือพื้นหลังมีสีม่วง 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 มุมดังกล่าวจะเป็นที่มุมขวาบน อาร์กิวเมนต์มุมจะยอมรับค่ามุมทุกประเภท เช่น การไล่ระดับสีแบบเส้นตรงและรัศมี

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

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

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

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

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

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

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

แหล่งข้อมูล

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

ตรวจสอบความเข้าใจ

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