การไล่ระดับสีใน CSS หมายถึงการเปลี่ยนสีอย่างราบรื่น ในอดีต เราต้องใช้รูปภาพที่กำหนดไว้ล่วงหน้าเพื่อให้ได้เอฟเฟกต์การไล่ระดับสี
ด้วย CSS3 คุณสามารถกำหนดการไล่ระดับสีได้สามประเภท ได้แก่ การไล่ระดับสีเชิงเส้น (สร้างผ่านฟังก์ชัน linear-gradient()) การไล่ระดับสีแบบรัศมี (สร้างผ่านฟังก์ชัน radial-gradient()) และการไล่ระดับสีทรงกรวย (สร้างผ่าน conic-gradient() สร้างฟังก์ชัน) นอกจากนี้ คุณสามารถสร้างการไล่ระดับสีแบบซ้ำได้โดยใช้ฟังก์ชันการไล่ระดับสีแบบรีพีทเชิงเส้น () แบบรีพีทติ้งเรเดียล () และแบบรีพีททรงกรวยไล่ระดับ ()
การไล่ระดับสีที่สร้างผ่าน CSS ไม่เพียงแต่เรียบง่ายและยืดหยุ่นเท่านั้น แต่ยังช่วยประหยัดเวลาในการโหลดหน้าเว็บด้วยการกำจัดกระบวนการโหลดที่จำเป็นเมื่อใช้รูปภาพ นอกจากนี้ องค์ประกอบการไล่ระดับสีที่สร้างด้วย CSS ยังสามารถขยายหรือลดขนาดได้ทุกขนาดโดยไม่สูญเสียคุณภาพ
1. การไล่ระดับสีเชิงเส้น การไล่ระดับสีเชิงเส้น ()
การไล่ระดับสีเชิงเส้นหมายถึงการไล่ระดับสีตามแนวเส้นตรง (เช่น จากขวาบนไปล่าง ซ้ายไปขวา ฯลฯ) หากต้องการสร้างการไล่ระดับสีเชิงเส้น คุณต้องกำหนดการหยุดสีอย่างน้อยสองจุด (จุดหยุดสีหมายถึง สีที่คุณต้องการเปลี่ยนอย่างราบรื่น) เพื่อสร้างเอฟเฟกต์การไล่ระดับสีที่ซับซ้อนมากขึ้น คุณต้องกำหนดการหยุดสีเพิ่มเติม ไวยากรณ์พื้นฐานสำหรับการสร้างการไล่ระดับสีเชิงเส้นมีดังนี้:
การไล่ระดับสีเชิงเส้น (ทิศทาง, สี-stop1, สี-stop2,...);
คำอธิบายพารามิเตอร์มีดังนี้:
ทิศทางเป็นค่าที่ไม่บังคับซึ่งกำหนดทิศทางของการไล่ระดับสี (เช่น จากซ้ายไปขวา จากบนลงล่าง) อาจเป็นมุมเฉพาะ (เช่น 90 องศา) หรือคุณสามารถใช้เพื่อบวกคำสำคัญ เช่น ซ้าย , ขวา, บน, ล่าง ฯลฯ เพื่อระบุทิศทางการไล่ระดับสี ตัวอย่างเช่น:
● ไปทางซ้าย: หมายถึงจากขวาไปซ้าย เทียบเท่ากับ 270deg;
● ไปทางขวา: หมายถึงจากซ้ายไปขวา เทียบเท่ากับ 90deg;
● ขึ้นไปบน: หมายถึงจากล่างขึ้นบน เทียบเท่ากับ 0deg;
● ไปล่าง: ค่าเริ่มต้น ระบุจากบนลงล่าง เทียบเท่ากับ 180deg;
● ไปทางขวาล่าง: หมายถึงจากซ้ายบนไปขวาล่าง;
● ไปทางขวาบน: หมายถึงจากซ้ายล่างไปขวาบน;
● ไปทางซ้ายล่าง: หมายถึงจากขวาบนไปซ้ายล่าง;
● ไปซ้ายบน: หมายถึงจากขวาล่างไปซ้ายบน
color-stop1, color-stop2, ...: ระบุระดับสีที่กำหนดหลายระดับ นอกเหนือจากการกำหนดสีในแต่ละระดับสีแล้ว ยังสามารถกำหนดตำแหน่งเริ่มต้นและสิ้นสุดของสีได้ด้วยการเพิ่มค่าให้กับหน่วยหรือ เปอร์เซ็นต์
[ตัวอย่าง] ใช้ฟังก์ชัน linear-gradient() เพื่อกำหนดการไล่ระดับสีเชิงเส้น:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:50px;float:left;margin:10px;}.one{พื้นหลัง:linear-gradient(torightbottom,red,blue70px);}. สอง {พื้นหลัง: การไล่ระดับสีเชิงเส้น (190deg, #000, #FFF);}. สาม {พื้นหลัง: linear-grad ient(red,green,blue);}.four{พื้นหลัง:linear-gradient(ไปทางขวา,แดง,ส้ม,เหลือง,เขียว,น้ำเงิน,คราม,ม่วง);}</style></head><body><divclass =one></div><divclass=two></div><divclass=three></div><divclass=four></div></body></html>ผลการวิ่ง:
2. การไล่ระดับสีแบบรัศมี รัศมี-การไล่ระดับสี();
ความแตกต่างระหว่างการไล่ระดับสีแบบรัศมีและการไล่ระดับสีเชิงเส้นคือการไล่ระดับสีแบบรัศมีที่ขยายออกไปด้านนอกจากศูนย์กลาง คุณสามารถระบุตำแหน่งของจุดกึ่งกลางและกำหนดรูปร่างของการไล่ระดับสีได้ ไวยากรณ์พื้นฐานสำหรับกำหนดการไล่ระดับสีในแนวรัศมีมีดังนี้:
การไล่ระดับสีแบบรัศมี (ตำแหน่งรูปร่าง, สี-stop1, สี-stop2,...);
คำอธิบายพารามิเตอร์มีดังนี้:
(1) ที่: คำหลักที่ต้องวางไว้หน้าตำแหน่งพารามิเตอร์
(2) ตำแหน่ง: ระบุพิกัดของจุดเริ่มต้นของการไล่ระดับสี คุณสามารถระบุพิกัดของจุดเริ่มต้นของการไล่ระดับสีได้โดยใช้ค่าบวกหนึ่งหน่วย เปอร์เซ็นต์ หรือคีย์เวิร์ด (เช่น ซ้าย ล่าง ฯลฯ ) หากมีการระบุพารามิเตอร์ 2 ตัว พารามิเตอร์ตัวแรกจะถูกใช้แทน Abscissa และพารามิเตอร์ตัวที่สองจะถูกใช้เพื่อแสดงถึงลำดับ หากระบุเพียงพารามิเตอร์เดียว พารามิเตอร์ตัวที่สองจะถูกตั้งค่าเป็น 50% โดยค่าเริ่มต้น ซึ่งก็คือ ศูนย์;
(3) รูปร่าง: ระบุรูปร่างของการไล่ระดับสี ค่าที่เป็นตัวเลือกคือวงกลม (วงกลม) และวงรี (วงรี)
(4) ขนาด: ระบุขนาดของรูปร่างไล่ระดับสี นอกเหนือจากการใช้ค่าตัวเลขเฉพาะเพื่อระบุรัศมีของวงกลมและวงรีแล้ว คุณยังสามารถใช้คำสำคัญที่แสดงด้านล่างเพื่อระบุขนาดของรูปร่างไล่ระดับสี:
● ด้านที่ใกล้ที่สุด: ระบุความยาวรัศมีของการไล่ระดับแนวรัศมีจากศูนย์กลางของวงกลมไปยังด้านที่ใกล้กับศูนย์กลางของวงกลมมากที่สุด
●มุมที่ใกล้ที่สุด: ระบุความยาวรัศมีของการไล่ระดับแนวรัศมีจากจุดศูนย์กลางของวงกลมไปยังมุมที่ใกล้กับจุดศูนย์กลางของวงกลมมากที่สุด
● ด้านที่ไกลที่สุด: ค่าเริ่มต้น ระบุความยาวรัศมีของการไล่ระดับแนวรัศมีจากศูนย์กลางของวงกลมไปยังด้านที่ไกลที่สุดจากศูนย์กลางของวงกลม
●มุมที่ไกลที่สุด: ระบุความยาวรัศมีของการไล่ระดับแนวรัศมีจากศูนย์กลางของวงกลมไปยังมุมที่ไกลที่สุดจากศูนย์กลางของวงกลม
(5) color-stop1, color-stop2,...: ระบุระดับสีที่กำหนดไว้หลายระดับ นอกเหนือจากการกำหนดสีในแต่ละระดับสีแล้ว ตำแหน่งเริ่มต้นและจุดสิ้นสุดของสียังสามารถกำหนดในรูปแบบของค่าตัวเลขได้อีกด้วย บวกหน่วยหรือเปอร์เซ็นต์
[ตัวอย่าง] ใช้ฟังก์ชัน radial-gradient() เพื่อกำหนดการไล่ระดับสีแบบรัศมี:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{พื้นหลัง:radial- การไล่ระดับสี(วงกลม50%,สีแดง,สีเหลือง,มะนาว);}.สอง{พื้นหลัง:รัศมี-การไล่ระดับสี(วงรี100px30pxat30%,สีแดง,สีเหลือง,มะนาว);}.สาม{พื้นหลัง:r adial-gradient(circle100pxat50%,red10%,yellow50%,lime100px);}.สี่{พื้นหลัง:radial-gradient(circleclosest-cornerat50px30px,red,y ellow,มะนาว);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four>< /div></body></html>ผลการวิ่ง:
3. การไล่ระดับสีแบบกรวย conic-gradient(); หมุนรอบจุดศูนย์กลาง
การไล่ระดับสีแบบกรวยจะคล้ายกับการไล่ระดับสีแบบรัศมี ทั้งสองแบบมีจุดศูนย์กลางเป็นจุดกำเนิดของระดับสี การกำหนดความลาดชันทรงกรวยมีดังนี้:
การไล่ระดับสีแบบกรวย (จากตำแหน่งมุม, สีเริ่มต้น, ..., สีสุดท้าย);
ไวยากรณ์อธิบายไว้ดังนี้:
(1) จาก: คำหลักที่ต้องวางไว้หน้ามุมพารามิเตอร์
(2) มุม: กำหนดมุมเริ่มต้นของการไล่ระดับสีกรวย ซึ่งสามารถเว้นว่างได้ และค่าเริ่มต้นคือ 0deg
(3) ที่: คำหลักที่ต้องวางไว้หน้าตำแหน่งพารามิเตอร์
(4) ตำแหน่ง: กำหนดพิกัดของจุดศูนย์กลางกรวยของการไล่ระดับของกรวย คุณสามารถระบุพิกัดของจุดศูนย์กลางกรวยได้โดยใช้ค่าบวกหน่วย เปอร์เซ็นต์ หรือคำสำคัญ (เช่น ซ้าย ล่าง ฯลฯ) จากนั้นพารามิเตอร์ตัวแรกที่ใช้เพื่อแสดง Abscissa และพารามิเตอร์ตัวที่สองจะถูกใช้เพื่อแสดงลำดับ หากมีการระบุพารามิเตอร์เพียงตัวเดียว พารามิเตอร์ตัวที่สองจะถูกตั้งค่าเป็น 50% โดยค่าเริ่มต้น ซึ่งเป็นศูนย์กลาง
(5) start-color, ..., Last-color: ระบุระดับสีที่กำหนดไว้หลายระดับ นอกเหนือจากการกำหนดสีในแต่ละระดับสีแล้ว ตำแหน่งเริ่มต้นของสียังสามารถกำหนดเป็นเปอร์เซ็นต์หรือมุมได้อีกด้วย
[ตัวอย่าง] ใช้ conic-gradient() เพื่อกำหนดการไล่ระดับสีกรวย:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{พื้นหลัง:conic-gradient(at50%,red, สีส้ม,สีเหลือง,สีเขียว,สีฟ้า,สีคราม,สีม่วง,สีแดง);}.two{backg รอบ: การไล่ระดับสีแบบกรวย (red0deg30deg, orange30deg50deg, yellow50deg200deg, green200deg300deg, blue300deg360de g);}.three{พื้นหลัง:conic-gradient(from90deg,red0%55%,yellow55%90%,lime90%100%);}.four{/*เทิร์น วงกลมมีทั้งหมด 1 รอบ 90deg=100grad=0.25turnµ1.570796326794897rad*/พื้นหลัง:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,# 0000.75turn);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></ div></body></html>ผลการวิ่ง:
4. การทำซ้ำการไล่ระดับสี การทำซ้ำเชิงเส้นการไล่ระดับสี ()
ใน CSS คุณยังสามารถใช้ฟังก์ชันต่างๆ เช่น Repeating-linear-gradient(), Repeating-radial-gradient() และ Repeating-conic-gradient() เพื่อสร้างการไล่ระดับสีซ้ำของการไล่ระดับสีเชิงเส้น การไล่ระดับสีในแนวรัศมี และการไล่ระดับสีทรงกรวยตามลำดับ สิ่งที่เรียกว่าการไล่ระดับสีซ้ำหมายถึงการทำซ้ำกระบวนการไล่ระดับสีหลายครั้งเพื่อให้ครอบคลุมองค์ประกอบทั้งหมด
เคล็ดลับ: ไวยากรณ์ของฟังก์ชัน Repeating-linear-gradient(), Repeating-radial-gradient() และ Repeating-conic-gradient() เหมือนกับไวยากรณ์ของ linear-gradient(), Radial-gradient() และฟังก์ชัน conic-gradient() ตามลำดับ
[ตัวอย่าง] ใช้สามฟังก์ชันที่ทำซ้ำ-linear-gradient(), ทำซ้ำ-radial-gradient() และทำซ้ำ-conic-gradient() เพื่อกำหนดการไล่ระดับสีซ้ำ:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{พื้นหลัง:repeating-linear-gradien t(190deg,#0000px10px,#FFF10px20px);}.สอง{พื้นหลัง:การทำซ้ำ-รัศมี-การไล่ระดับสี(วงกลม100pxat50%,red0%10%,สีเหลือง10%30%,มะนาว30%40%);}.สาม{พื้นหลัง :repeating-conic-gradient(#69f036deg,#fd44ff36deg72deg);}.four{พื้นหลัง:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,#0000 .75turn)topleft/25%25% ซ้ำ;}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div> <divclass=สี่></div></body></html>ผลการวิ่ง:
