พอดแคสต์ 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 สำหรับการไล่ระดับสี
- เครื่องมือสร้างการไล่ระดับสี
ตรวจสอบความเข้าใจ
ทดสอบความรู้เรื่องการไล่ระดับสี
จำนวนสีขั้นต่ำที่จำเป็นในการสร้างการไล่ระดับสีคือเท่าใด
องค์ประกอบสามารถไล่ระดับสีหลายระดับเป็นพื้นหลังได้ไหม