การไล่ระดับสี CSS3 ช่วยให้คุณแสดงเปลี่ยนราบรื่นระหว่างสองหรือสีอื่น ๆ ที่ระบุไว้
ก่อนหน้านี้คุณมีการใช้ภาพสำหรับผลกระทบเหล่านี้ แต่ด้วยการใช้การไล่ระดับสี CSS3 คุณสามารถลดเวลาในการดาวน์โหลดและการใช้งานแบนด์วิดธ์ นอกจากนี้ยังมีองค์ประกอบที่มีการไล่ระดับสีดูดีขึ้นเมื่อซูมเพราะการไล่ระดับสีถูกสร้างขึ้นโดยเบราว์เซอร์
CSS3 กำหนดสองประเภทของการไล่ระดับสี:
- การไล่ระดับสีเชิงเส้น (ไปลง / ขึ้น / ซ้าย / ขวา / แนวทแยงมุม)
- การไล่ระดับสีรัศมี (ที่กำหนดโดยศูนย์ของพวกเขา)
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
ไล่ระดับสี CSS3 เชิงเส้น
เพื่อสร้างลาดเชิงเส้นคุณต้องกำหนดอย่างน้อยสองหยุดสี หยุดสีเป็นสีที่คุณต้องการที่จะทำให้เปลี่ยนราบรื่นหมู่ นอกจากนี้คุณยังสามารถกำหนดจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมด้วยผลการไล่ระดับสี
วากยสัมพันธ์
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );ลาดเชิงเส้น - บนลงล่าง (นี้เป็นค่าเริ่มต้น)
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีเชิงเส้นที่เริ่มต้นที่ด้านบน มันเริ่มต้นสีแดง, สีเหลืองเปลี่ยนไป:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} ลองตัวเอง» ลาดเชิงเส้น - จากซ้ายไปขวา
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีเชิงเส้นที่เริ่มต้นจากด้านซ้าย มันเริ่มต้นสีแดง, สีเหลืองเปลี่ยนไป:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} ลองตัวเอง» ลาดเชิงเส้น - เส้นทแยงมุม
คุณสามารถทำให้การไล่ระดับสีในแนวทแยงมุมโดยระบุทั้งแนวนอนและแนวตำแหน่งเริ่มต้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีเชิงเส้นที่เริ่มต้นที่ด้านบนซ้าย (และไปที่ด้านล่างขวา) มันเริ่มต้นสีแดง, สีเหลืองเปลี่ยนไป:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} ลองตัวเอง» โดยใช้มุม
หากคุณต้องการการควบคุมที่มากกว่าทิศทางของการไล่ระดับสีที่คุณสามารถกำหนดมุมแทนที่จะเป็นเส้นทางที่กำหนดไว้ล่วงหน้า (ลงล่างขึ้นไปด้านบนไปขวาไปซ้ายไปขวาล่าง ฯลฯ )
วากยสัมพันธ์
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
มุมที่ถูกระบุเป็นมุมระหว่างเส้นแนวนอนและสายการไล่ระดับสี
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้มุมในการไล่ระดับสีเชิงเส้น:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} ลองตัวเอง» ใช้หยุดหลายสี
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีเชิงเส้น (จากบนลงล่าง) กับหยุดหลายสี:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} ลองตัวเอง» ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างลาดเชิงเส้น (จากซ้ายไปขวา) กับสีของรุ้งและข้อความบางส่วน:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} ลองตัวเอง» การใช้ความโปร่งใส
การไล่ระดับสี CSS3 ยังสนับสนุนความโปร่งใสซึ่งสามารถนำมาใช้ในการสร้างผลซีดจาง
เพื่อเพิ่มความโปร่งใสเราจะใช้ rgba() ฟังก์ชั่นในการกำหนดหยุดสี พารามิเตอร์สุดท้ายใน rgba() ฟังก์ชั่นสามารถเป็นมูลค่า 0-1 และจะกำหนดความโปร่งใสของสี: 0 แสดงความโปร่งใสเต็ม 1 แสดงสีเต็มรูปแบบ (ไม่โปร่งใส)
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีเชิงเส้นที่เริ่มต้นจากด้านซ้าย มันเริ่มต้นอย่างโปร่งใส, เปลี่ยนเป็นสีแดงสีเต็มรูปแบบ:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} ลองตัวเอง» การทำซ้ำเชิงเส้นลาด
repeating-linear-gradient() ฟังก์ชั่นที่ใช้ในการทำซ้ำการไล่ระดับสีเชิงเส้น:
ตัวอย่าง
ซ้ำลาดเชิงเส้น:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} ลองตัวเอง» CSS3 รัศมีการไล่ระดับสี
การไล่ระดับสีรัศมีจะถูกกำหนดโดยศูนย์
เพื่อสร้างการไล่ระดับสีรัศมีคุณยังต้องกำหนดอย่างน้อยสองหยุดสี
วากยสัมพันธ์
background: radial-gradient( shape size at position, start-color, ..., last-color );โดยค่าเริ่มต้นเป็นรูปวงรีขนาดเป็นมุมที่ไกลที่สุดและตำแหน่งเป็นศูนย์กลาง
รัศมีการไล่โทนสี - หยุดเว้นระยะเท่ากันสี (นี้เป็นค่าเริ่มต้น)
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีรัศมีหยุดเว้นระยะเท่ากันสี:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} ลองตัวเอง» รัศมีการไล่โทนสี - แตกต่างกันโดยเว้นระยะหยุดสี
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีรัศมีกับหยุดเว้นระยะสีที่แตกต่างกัน:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} ลองตัวเอง» ชุดรูปร่าง
พารามิเตอร์ที่กำหนดรูปทรงรูปร่าง มันสามารถใช้เวลาคุ้มค่าวงกลมหรือวงรี ค่าเริ่มต้นคือวงรี
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีรัศมีที่มีรูปร่างของวงกลม:
ตัวอย่าง
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} ลองตัวเอง» การใช้คำสำคัญขนาดแตกต่างกัน
พารามิเตอร์ขนาดกำหนดขนาดของการไล่ระดับสี มันสามารถใช้เวลาสี่ค่า:
- ที่อยู่ใกล้ฝั่ง
- ที่ไกลฝั่ง
- ที่อยู่ใกล้มุม
- มุมที่ไกลที่สุด
ตัวอย่าง
การไล่ระดับสีรัศมีที่มีคำหลักขนาดแตกต่างกัน:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} ลองตัวเอง» ซ้ำรัศมีการไล่ระดับสี
repeating-radial-gradient() ฟังก์ชั่นที่ใช้ในการทำซ้ำการไล่ระดับสีรัศมี:
ตัวอย่าง
ซ้ำการไล่ระดับสีรัศมี:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 » ออกกำลังกาย 6 » ออกกำลังกาย 7 »