บทช่วยสอน CSS3 ไล่โทนสี ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
สนับสนุนเบราว์เซอร์,การไล่ระดับสี CSS3 เชิงเส้น,ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,มุมการใช้งาน,ตัวอย่าง,ใช้โหนดหลายสี,ตัวอย่าง,ตัวอย่าง,ความโปร่งใส (โปร่งใส),ตัวอย่าง,ลาดเชิงเส้นที่ซ้ำกัน,ตัวอย่าง,CSS3 ลาดรัศมี,ตัวอย่าง,ตัวอย่าง,รูปร่างการตั้งค่า,ตัวอย่าง,คีย์เวิร์ดในขนาดที่แตกต่างกัน,ตัวอย่าง,ซ้ำการไล่ระดับสีรัศมี,ตัวอย่าง,
CSS3 ไล่โทนสี
การไล่ระดับสี CSS3 (การไล่ระดับสี) ช่วยให้คุณแสดงราบรื่นระหว่างสองหรือสีอื่น ๆ ที่ระบุไว้
ก่อนหน้านี้คุณต้องใช้ภาพเพื่อให้บรรลุผลกระทบเหล่านี้ แต่ด้วยการใช้การไล่ระดับสี CSS3 (การไล่ระดับสี) คุณสามารถลดการเกิดการดาวน์โหลดและการใช้บรอดแบนด์ นอกจากนี้องค์ประกอบของผลการเปลี่ยนแปลงที่ดูดีขึ้นเมื่อคุณซูมเข้าเพราะการไล่ระดับสี (ลาด) ถูกสร้างขึ้นโดยเบราว์เซอร์
CSS3 กำหนดสองประเภทของการไล่ระดับสี (ไล่ระดับสี):
- ลาดเชิงเส้น (เชิงเส้นไล่ระดับสี) - ขึ้น / ลง / ซ้าย / ขวา / แนวทแยง
- การไล่ระดับสีเรเดียล (Radial การไล่ระดับสี) - กำหนดโดยศูนย์ของพวกเขา
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางแอตทริบิวต์ระบุสนับสนุนอย่างเต็มที่จากรุ่นแรกของเบราว์เซอร์
ด้านหลังด้วย -webkit - - moz- หรือ -o- ระบุจำนวนที่ต้องการมีคุณลักษณะคำนำหน้าเพื่อสนับสนุนรุ่นแรก
属性 |
|
|
|
|
|
linear-gradient |
10.0 |
26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
radial-gradient |
10.0 |
26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
repeating-linear-gradient |
10.0 |
26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
repeating-radial-gradient |
10.0 |
26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
การไล่ระดับสี CSS3 เชิงเส้น
เพื่อสร้างลาดเชิงเส้นคุณต้องกำหนดอย่างน้อยสองโหนดสี โหนดสีที่เป็นสีที่คุณต้องการที่จะแสดงให้ราบรื่น ในขณะเดียวกันคุณยังสามารถตั้งค่าเป็นจุดเริ่มต้นและทิศทาง (หรือมุม)
เป็น Linear ตัวอย่างการไล่ระดับสี:
ไวยากรณ์
background: linear-gradient( direction , color-stop1 ,
color-stop2, th. );
เชิงเส้นลาด - จากบนลงล่าง (ค่าเริ่มต้น)
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีแบบเส้นตรงจากด้านบน จุดเริ่มต้นคือสีแดงและค่อยๆเปลี่ยนเป็นสีฟ้า:
ตัวอย่าง
ลาดเชิงเส้นจากบนลงล่าง:
#grad {
background: -webkit-linear-gradient(red,
blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /*
Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /*
Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
ลอง» ลาดเชิงเส้น - จากซ้ายไปขวา
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีแบบเส้นตรงจากทางด้านซ้าย จุดเริ่มต้นคือสีแดงและค่อยๆเปลี่ยนเป็นสีฟ้า:
ตัวอย่าง
ลาดเชิงเส้นจากซ้ายไปขวา:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to
right, red , blue); /* 标准的语法 */
}
ลอง» ลาดเชิงเส้น - เส้นทแยงมุม
คุณสามารถทำให้การไล่ระดับสีในแนวทแยงโดยการระบุตำแหน่งเริ่มต้นนอนและแนวตั้ง
ตัวอย่างต่อไปนี้แสดงให้เห็นจากมุมซ้ายบน (ล่างขวา) ลาดเชิงเส้น จุดเริ่มต้นคือสีแดงและค่อยๆเปลี่ยนเป็นสีฟ้า:
ตัวอย่าง
จากบนซ้ายเพื่อลดมุมขวาของลาดเชิงเส้น:
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 - 15 */
background:
linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
ลอง»
มุมการใช้งาน
ถ้าคุณทำต้องการควบคุมทิศทางของการไล่ระดับสีที่คุณสามารถกำหนดจุดของมุมมองมากกว่าทิศทางที่กำหนดไว้ล่วงหน้า (ลงล่างขึ้นไปด้านบนไปขวาไปซ้ายไปขวาล่างและอื่น ๆ )
ไวยากรณ์
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
มุมหมายถึงมุมระหว่างแนวนอนและเส้นลาดคำนวณทวนเข็มนาฬิกา ในคำอื่น ๆ 0deg จะสร้างการไล่ระดับสีจากล่างขึ้นบนที่ 90deg สร้างการไล่ระดับสีจากซ้ายไปขวา
อย่างไรก็ตามโปรดทราบว่าเบราว์เซอร์จำนวนมาก (Chrome, Safari, fiefox ฯลฯ ) โดยใช้มาตรฐานเดิมคือ 0deg จะสร้างการไล่ระดับสีจากซ้ายไปขวาที่ 90deg จะสร้างการไล่ระดับสีจากด้านล่างไปด้านบน สูตรการแปลง 90 - X = Y ที่ x คือมุมมาตรฐาน, y เป็นมุมที่ไม่ได้มาตรฐาน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้มุมลาดเชิงเส้น:
ตัวอย่าง
ลาดเชิงเส้นที่มีมุมมองที่ระบุ
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 - 15 */
background:
linear-gradient(180deg, red, blue); /* 标准的语法 */
}
ลอง»
ใช้โหนดหลายสี
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการตั้งค่าส่วนใหญ่ของโหนดสี:
ตัวอย่าง
ลาดเชิงเส้นจากบนลงล่างกับส่วนใหญ่ของโหนดสี:
#grad {
background: -webkit-linear-gradient(red,
green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green,
blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red,
green, blue); /* Firefox 3.6 - 15 */
background:
linear-gradient(red, green, blue); /* 标准的语法 */
}
ลอง» ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างรุ้งสีและข้อความที่มีการไล่ระดับสีเชิงเส้น:
ตัวอย่าง
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}
ลอง»
ความโปร่งใส (โปร่งใส)
การไล่ระดับสี CSS3 ยังสนับสนุนความโปร่งใส (โปร่งใส) ก็สามารถนำมาใช้ในการสร้างผลกระทบของการจางหายลดลง
เพื่อเพิ่มความโปร่งใสเราจะใช้ RGBA () เพื่อกำหนดสีของโหนด RGBA () ฟังก์ชันพารามิเตอร์ที่ผ่านมาเป็นค่าที่ 0-1 ซึ่งได้กำหนดความโปร่งใสของสี: 0 มีความโปร่งใสอย่างเต็มที่ 1 เป็นทึบแสงได้อย่างเต็มที่
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีแบบเส้นตรงจากทางด้านซ้าย จุดเริ่มต้นคือความโปร่งใสอย่างสมบูรณ์และค่อยๆเปลี่ยนไปอย่างเต็มที่ทึบแสงสีแดง:
ตัวอย่าง
ลาดเชิงเส้นจากซ้ายไปขวาด้วยความโปร่งใส:
#grad {
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));
/* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /* 标准的语法 */
}
ลอง»
ลาดเชิงเส้นที่ซ้ำกัน
การทำซ้ำเชิงเส้นลาด () ฟังก์ชั่นที่ใช้ในการทำซ้ำลาดเชิงเส้น:
ตัวอย่าง
ลาดเชิงเส้นที่ซ้ำกัน:
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
- 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* 标准的语法 */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
ลอง»
CSS3 ลาดรัศมี
การไล่ระดับสีรัศมีจะถูกกำหนดโดยศูนย์
เพื่อสร้างการไล่ระดับสีรัศมีคุณยังต้องกำหนดอย่างน้อยสองโหนดสี โหนดสีที่เป็นสีที่คุณต้องการที่จะแสดงให้ราบรื่น ในขณะเดียวกันคุณยังสามารถระบุศูนย์กลางของการไล่ระดับสีรูปร่าง (ต้นแบบหรือรูปไข่) ขนาด โดยค่าเริ่มต้นเหล่านั้นที่ศูนย์เป็นศูนย์ (แสดงในศูนย์) รูปทรงของการไล่โทนที่เป็นวงรี (แสดงวงรี) ขนาดของการไล่ระดับสีที่ไกลที่สุดคือมุม (แสดงมุมที่ไกลที่สุด)
ตัวอย่างการไล่ระดับสีรัศมี:
ไวยากรณ์
background: radial-gradient( center, shape size, start-color, th., last-color );
รัศมีการไล่โทนสี - สีโหนดกระจายอย่างสม่ำเสมอ (โดยค่าเริ่มต้น)
ตัวอย่าง
โหนดสีไล่ระดับสีรัศมีกระจาย:
#grad {
background: -webkit-radial-gradient(red, green, blue); /*
Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera
11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /*
Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue);
/* 标准的语法 */
}
ลอง» รัศมีการไล่ระดับสี - สีกระจายไม่สม่ำเสมอโหนด
ตัวอย่าง
โหนดสีไล่ระดับสีรัศมีกระจาย:
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue
60%); /*
Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera
11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /*
Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue
60%);
/* 标准的语法 */
}
ลอง»
รูปร่างการตั้งค่า
พารามิเตอร์ที่กำหนดรูปทรงรูปร่าง มันอาจจะเป็นวงกลมหรือวงรีค่า ประเด็นวงกลมที่เป็นตัวแทนของวงกลมวงรีรูปไข่บ่งชี้ ค่าเริ่มต้นคือวงรี
ตัวอย่าง
รูปร่างของการไล่ระดับสีรัศมีวงกลม:
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red,
yellow, green);
/* 标准的语法 */
}
ลอง»
คีย์เวิร์ดในขนาดที่แตกต่างกัน
พารามิเตอร์ขนาดกำหนดขนาดของการไล่ระดับสี มันอาจจะเป็นดังต่อไปนี้ค่าที่สี่:
- ที่อยู่ใกล้ฝั่ง
- ที่ไกลฝั่ง
- ที่อยู่ใกล้มุม
- มุมที่ไกลที่สุด
ตัวอย่าง
การไล่ระดับสีรัศมีที่มีคำหลักขนาดแตกต่างกัน:
#grad1 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%,
closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
ลอง»
ซ้ำการไล่ระดับสีรัศมี
ซ้ำรัศมีลาด () ฟังก์ชั่นที่ใช้ในการทำซ้ำการไล่ระดับสีรัศมี:
ตัวอย่าง
ทำซ้ำลาดรัศมี:
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox
3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* 标准的语法 */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
}
ลอง»