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: -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); /* 标准的语法 */
}
ลอง»
ลาดเชิงเส้น - จากซ้ายไปขวา
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีแบบเส้นตรงจากทางด้านซ้าย จุดเริ่มต้นคือสีแดงและค่อยๆเปลี่ยนเป็นสีฟ้า:
ตัวอย่าง
ลาดเชิงเส้นจากซ้ายไปขวา:
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); /* 标准的语法 */
}
ลอง»
ลาดเชิงเส้น - เส้นทแยงมุม
คุณสามารถทำให้การไล่ระดับสีในแนวทแยงโดยการระบุตำแหน่งเริ่มต้นนอนและแนวตั้ง
ตัวอย่างต่อไปนี้แสดงให้เห็นจากมุมซ้ายบน (ล่างขวา) ลาดเชิงเส้น จุดเริ่มต้นคือสีแดงและค่อยๆเปลี่ยนเป็นสีฟ้า:
ตัวอย่าง
จากบนซ้ายเพื่อลดมุมขวาของลาดเชิงเส้น:
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); /* 标准的语法 */
}
ลอง»
มุมการใช้งาน
ถ้าคุณทำต้องการควบคุมทิศทางของการไล่ระดับสีที่คุณสามารถกำหนดจุดของมุมมองมากกว่าทิศทางที่กำหนดไว้ล่วงหน้า (ลงล่างขึ้นไปด้านบนไปขวาไปซ้ายไปขวาล่างและอื่น ๆ )
ไวยากรณ์
มุมหมายถึงมุมระหว่างแนวนอนและเส้นลาดคำนวณทวนเข็มนาฬิกา ในคำอื่น ๆ 0deg จะสร้างการไล่ระดับสีจากล่างขึ้นบนที่ 90deg สร้างการไล่ระดับสีจากซ้ายไปขวา
อย่างไรก็ตามโปรดทราบว่าเบราว์เซอร์จำนวนมาก (Chrome, Safari, fiefox ฯลฯ ) โดยใช้มาตรฐานเดิมคือ 0deg จะสร้างการไล่ระดับสีจากซ้ายไปขวาที่ 90deg จะสร้างการไล่ระดับสีจากด้านล่างไปด้านบน สูตรการแปลง 90 - X = Y ที่ x คือมุมมาตรฐาน, y เป็นมุมที่ไม่ได้มาตรฐาน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการใช้มุมลาดเชิงเส้น:
ตัวอย่าง
ลาดเชิงเส้นที่มีมุมมองที่ระบุ
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); /* 标准的语法 */
}
ลอง»
ใช้โหนดหลายสี
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการตั้งค่าส่วนใหญ่ของโหนดสี:
ตัวอย่าง
ลาดเชิงเส้นจากบนลงล่างกับส่วนใหญ่ของโหนดสี:
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); /* 标准的语法 */
}
ลอง»
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างรุ้งสีและข้อความที่มีการไล่ระดับสีเชิงเส้น:
ตัวอย่าง
/* 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 เป็นทึบแสงได้อย่างเต็มที่
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีแบบเส้นตรงจากทางด้านซ้าย จุดเริ่มต้นคือความโปร่งใสอย่างสมบูรณ์และค่อยๆเปลี่ยนไปอย่างเต็มที่ทึบแสงสีแดง:
ตัวอย่าง
ลาดเชิงเส้นจากซ้ายไปขวาด้วยความโปร่งใส:
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)); /* 标准的语法 */
}
ลอง»
ลาดเชิงเส้นที่ซ้ำกัน
การทำซ้ำเชิงเส้นลาด () ฟังก์ชั่นที่ใช้ในการทำซ้ำลาดเชิงเส้น:
ตัวอย่าง
ลาดเชิงเส้นที่ซ้ำกัน:
/* 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: -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); /* 标准的语法 */
}
ลอง»
รัศมีการไล่ระดับสี - สีกระจายไม่สม่ำเสมอโหนด
ตัวอย่าง
โหนดสีไล่ระดับสีรัศมีกระจาย:
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%); /* 标准的语法 */
}
ลอง»
รูปร่างการตั้งค่า
พารามิเตอร์ที่กำหนดรูปทรงรูปร่าง มันอาจจะเป็นวงกลมหรือวงรีค่า ประเด็นวงกลมที่เป็นตัวแทนของวงกลมวงรีรูปไข่บ่งชี้ ค่าเริ่มต้นคือวงรี
ตัวอย่าง
รูปร่างของการไล่ระดับสีรัศมีวงกลม:
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); /* 标准的语法 */
}
ลอง»
คีย์เวิร์ดในขนาดที่แตกต่างกัน
พารามิเตอร์ขนาดกำหนดขนาดของการไล่ระดับสี มันอาจจะเป็นดังต่อไปนี้ค่าที่สี่:
- ที่อยู่ใกล้ฝั่ง
- ที่ไกลฝั่ง
- ที่อยู่ใกล้มุม
- มุมที่ไกลที่สุด
ตัวอย่าง
การไล่ระดับสีรัศมีที่มีคำหลักขนาดแตกต่างกัน:
/* 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);
}
ลอง»
ซ้ำการไล่ระดับสีรัศมี
ซ้ำรัศมีลาด () ฟังก์ชั่นที่ใช้ในการทำซ้ำการไล่ระดับสีรัศมี:
ตัวอย่าง
ทำซ้ำลาดรัศมี:
/* 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%);
}
ลอง»