ฟังก์ชัน linear-gradient
ฟังก์ชัน linear-gradient กำหนดการไล่ระดับสีเชิงเส้น
ใช้กับคุณสมบัติที่กำหนดรูปภาพพื้นหลัง: background,
background-image
หรือรูปภาพขอบ: border-image,
background-image-source.
ไวยากรณ์
selector {
background: linear-gradient([มุมหรือทิศทาง], color1 size1, color2 size2...);
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
| ทิศทาง |
กำหนดทิศทางการไล่ระดับสีที่เฉพาะเจาะจง ใน หน่วยของมุม ใดๆ
หรือด้วยคำสำคัญ top, left, right, bottom
หรือการรวมกันของคำเหล่านั้น: top left, top right และอื่นๆ
ลำดับของคำไม่สำคัญ: สามารถเขียน top left และ left top,
ไม่แตกต่างกัน พารามิเตอร์นี้ไม่จำเป็น: หากไม่เขียน การไล่ระดับสีจะ
ไปจากบนลงล่าง (เหมือนกับ to top) ด้านหน้าทิศทางจะใส่คำว่า to
|
| มุม | มุมใน หน่วยของมุม ใดๆ สามารถเป็นค่าบวกหรือลบได้ พารามิเตอร์นี้ไม่จำเป็น สามารถ กำหนดได้ทั้งมุม หรือทิศทาง (หรือไม่กำหนดอะไรเลย) |
| color1 | สีเริ่มต้นของการไล่ระดับสีใน หน่วยของสี ใดๆ |
| color2 | สีสุดท้ายของการไล่ระดับสีใน หน่วยของสี ใดๆ |
| ขนาด | กำหนดความยาวของสีเฉพาะในการไล่ระดับสี ใน หน่วยของขนาด ใดๆ |
ตัวอย่าง . รูปแบบที่ง่ายที่สุด
ไวยากรณ์:
selector {
background: linear-gradient(สีเริ่มต้น, สีสุดท้าย);
}
ลองดูตัวอย่าง:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . เพิ่มมุม
ไวยากรณ์:
selector {
background: linear-gradient(มุม, สีเริ่มต้น, สีสุดท้าย);
}
ลองดูตัวอย่าง:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . เพิ่มทิศทาง
แทนที่จะเป็นมุม สามารถเพิ่มทิศทางได้
top, left, right, bottom
หรือการรวมกัน: top left, top right
ด้านหน้าทิศทางจะใส่คำว่า to
ไวยากรณ์:
selector {
background: linear-gradient(ทิศทาง, สีเริ่มต้น, สีสุดท้าย);
}
ลองดูตัวอย่าง:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . เพิ่มทิศทาง
ระบุทิศทางอื่น:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . เพิ่มขนาด
ไวยากรณ์:
selector {
background: linear-gradient(color1 size1, color2 size2);
}
ในตัวอย่างถัดไป พฤติกรรมจะเป็นดังนี้:
สีแดงล้วนจะจาก 0px ถึง
30px, จาก 30px ถึง 50px
จะเป็นกราฟเดียนต์จากแดงไปน้ำเงิน และ
จาก 50px ถึงสุดท้าย - สีน้ำเงินล้วน:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . เพิ่มสีมากกว่า 2 สี
ไวยากรณ์:
selector {
background: linear-gradient(color1 size1, color2 size2, color3 size3...);
}
ในตัวอย่างถัดไป พฤติกรรมจะเป็นดังนี้:
สีแดงล้วนจะจาก 0px ถึง
30px, จาก 30px ถึง 50px
จะเป็นกราฟเดียนต์จากแดงไปน้ำเงิน และ
จาก 50px ถึง 70px - กราฟเดียนต์จากน้ำเงิน
ไปเขียว และหลังจาก 70px - สีเขียวล้วน:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . การเปลี่ยนแบบกะทันหัน
ในตัวอย่างถัดไป พฤติกรรมจะเป็นดังนี้:
สีแดงล้วนจะจาก 0px ถึง
30px, สีน้ำเงินล้วน - จาก 30px
ถึง 60px, สีเขียวล้วน - หลังจาก 60px
(red 0px สามารถไม่เขียนก็ได้):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . สามารถกำหนดขนาดเป็นเปอร์เซ็นต์ได้
ในตัวอย่างถัดไป พฤติกรรมจะเป็นดังนี้:
สีแดงล้วนจะจาก 0% ถึง
30%, สีน้ำเงินล้วน - จาก 30%
ถึง 60%, สีเขียวล้วน - หลังจาก 60%
(red 0% สามารถไม่เขียนก็ได้):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
ตัวอย่าง . การใช้ร่วมกับ background-size
ในตัวอย่างถัดไป พฤติกรรมจะเป็นดังนี้:
สีแดงล้วนจะจาก 0px ถึง
30px, สีน้ำเงินล้วน - จาก 30px
ถึง 60px, ในขณะที่ทั้งหมดนี้จะทำซ้ำ
เป็นชิ้นๆ ละ 60px (เนื่องจาก background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
ดูเพิ่มเติม
-
ฟังก์ชัน
radial-gradient,
ซึ่งสร้างการไล่ระดับสีแบบรัศมี -
ฟังก์ชัน
repeating-linear-gradient,
ซึ่งสร้างการไล่ระดับสีเชิงเส้นแบบทำซ้ำ -
ฟังก์ชัน
repeating-radial-gradient,
ซึ่งสร้างการไล่ระดับสีแบบรัศมีแบบทำซ้ำ
