พอดแคสต์ CSS - 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);
}
ค่าหยุดสีซึ่งกำหนดว่าสีจะหยุดและผสมกับสีใกล้เคียง สำหรับการไล่ระดับสีที่เริ่มต้นด้วยเฉดสีแดงเข้มทำมุม 45deg ที่ขนาด 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()
ซึ่งคล้ายกับฟังก์ชันที่ซ้ำกันและใช้อาร์กิวเมนต์เดียวกัน
สิ่งที่แตกต่างคือ หากการไล่ระดับสีที่กำหนดไว้สามารถใช้ซ้ำเพื่อเติมสีในช่องได้ การไล่ระดับสีทั้ง 2 ขนาดจะใช้การไล่ระดับสี
หากการไล่ระดับสีไม่แสดงซ้ำ
คุณอาจยังไม่ได้กำหนดความยาวสำหรับการหยุดสีแบบใดแบบหนึ่ง
ตัวอย่างเช่น
คุณสร้างพื้นหลังที่เป็นลายเส้นได้ด้วย repeating-linear-gradient
โดยการตั้งค่าระยะเวลาการหยุดสี
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
คุณยังสามารถผสมฟังก์ชันการไล่ระดับสีในพร็อพเพอร์ตี้ background
ได้ด้วย รวมถึงกำหนดการไล่ระดับสีได้มากเท่าที่ต้องการ เช่นเดียวกับที่ทำกับภาพพื้นหลัง
เช่น คุณสามารถผสมการไล่ระดับสีแบบเส้นตรงหลายรายการเข้าด้วยกัน หรือผสมการไล่ระดับสีแบบเส้นตรง 2 แบบด้วยการไล่ระดับสีแบบรัศมี
แหล่งข้อมูล
- Conic.css - คอลเล็กชันการไล่ระดับสีแบบกรวยที่มีประโยชน์
- คู่มือ MDN เกี่ยวกับการไล่ระดับสี
- เครื่องมือสร้างการไล่ระดับสี
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการไล่ระดับสี
จำนวนสีขั้นต่ำที่ต้องใช้เพื่อสร้างการไล่ระดับสีคือเท่าใด
องค์ประกอบมีการไล่ระดับสีหลายสีเป็นพื้นหลังได้ไหม
background-image
อนุญาตการไล่ระดับสีหลายแบบ เพียงคั่นแต่ละค่าด้วยคอมมา