CSS Gradients
การไล่ระดับสี CSS ช่วยให้คุณแสดงการเปลี่ยนที่ราบรื่นระหว่างสีที่ระบุตั้งแต่สองสีขึ้นไป
CSS กำหนดของการไล่ระดับสีสามประเภท:
- การไล่ระดับสีเชิงเส้น (ลง/ขึ้น/ซ้าย/ขวา/แนวทแยง)
- Radial Gradients (กำหนดโดยจุดศูนย์กลาง)
- Conic Gradients (หมุนรอบจุดศูนย์กลาง)
CSS Linear Gradients
ในการสร้างการไล่ระดับสีเชิงเส้น คุณต้องกำหนดจุดหยุดสีอย่างน้อยสองจุด สต็อปสีคือสีที่คุณต้องการทำให้การเปลี่ยนสีเป็นไปอย่างราบรื่น คุณยังสามารถกำหนดจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมกับเอฟเฟกต์การไล่ระดับสี
ไวยากรณ์
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
ทิศทาง - บนลงล่าง (นี่เป็นค่าเริ่มต้น)
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มต้นที่ด้านบน มันเริ่มเป็นสีแดง เปลี่ยนเป็นสีเหลือง:
ตัวอย่าง
#grad {
background-image: linear-gradient(red, yellow);
}
ทิศทาง - ซ้ายไปขวา
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มจากด้านซ้าย มันเริ่มเป็นสีแดง เปลี่ยนเป็นสีเหลือง:
ตัวอย่าง
#grad {
background-image: linear-gradient(to right, red , yellow);
}
ทิศทาง - เส้นทแยงมุม
คุณสามารถทำการไล่ระดับสีในแนวทแยงโดยระบุตำแหน่งเริ่มต้นทั้งแนวนอนและแนวตั้ง
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มต้นที่ด้านซ้ายบน (และไปที่ด้านล่างขวา) มันเริ่มเป็นสีแดง เปลี่ยนเป็นสีเหลือง:
ตัวอย่าง
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
การใช้มุม
หากคุณต้องการควบคุมทิศทางของการไล่ระดับสีมากขึ้น คุณสามารถกำหนดมุม แทนทิศทางที่กำหนดไว้ล่วงหน้าได้ (ไปด้านล่าง ด้านบน ไปทางขวา ไปซ้าย ไปล่างขวา ฯลฯ) ค่า 0deg เทียบเท่ากับ "to top" ค่า 90deg เทียบเท่ากับ "ไปทางขวา" ค่า 180deg เทียบเท่ากับ "to bottom"
ไวยากรณ์
background-image: linear-gradient(angle, color-stop1, color-stop2);
ตัวอย่างต่อไปนี้แสดงวิธีใช้มุมในการไล่ระดับสีเชิงเส้น:
ตัวอย่าง
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
ใช้การหยุดหลายสี
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีแบบเส้นตรง (จากบนลงล่าง) โดยมีสต็อปหลายสี:
ตัวอย่าง
#grad {
background-image: linear-gradient(red, yellow, green);
}
ตัวอย่างต่อไปนี้แสดงวิธีการสร้างการไล่ระดับสีแบบเส้นตรง (จากซ้ายไปขวา) ด้วยสีของรุ้งและข้อความบางส่วน:
ตัวอย่าง
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
ใช้ความโปร่งใส
การไล่ระดับสี CSS ยังสนับสนุนความโปร่งใส ซึ่งสามารถใช้เพื่อสร้างเอฟเฟกต์การซีดจาง
เพื่อเพิ่มความโปร่งใส เราใช้ฟังก์ชัน rgba() เพื่อกำหนดจุดหยุดสี พารามิเตอร์สุดท้ายในฟังก์ชัน rgba() สามารถเป็นค่าได้ตั้งแต่ 0 ถึง 1 และกำหนดความโปร่งใสของสี: 0 หมายถึงความโปร่งใสทั้งหมด 1 หมายถึงสีเต็ม (ไม่โปร่งใส)
ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มจากด้านซ้าย เริ่มโปร่งใสโดยเปลี่ยนเป็นสีแดงทั้งหมด:
ตัวอย่าง
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
ทำซ้ำการไล่ระดับเชิงเส้น
ฟังก์ชัน repeating-linear-gradient() ใช้เพื่อทำซ้ำการไล่ระดับสีเชิงเส้น:
ตัวอย่าง
การไล่ระดับสีเชิงเส้นซ้ำ:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}