การเติมไล่ระดับสี CSS การไล่ระดับสีเชิงเส้น

การไล่ระดับสี - เติมพื้นที่ที่เลือกด้วยลำดับเฉดสีพร้อมการเปลี่ยนระหว่างเฉดสีที่ราบรื่น การไล่ระดับสีใช้เพื่อแสดงการเปลี่ยนแปลงที่ราบรื่นระหว่างเฉดสีที่ระบุตั้งแต่สองเฉดสีขึ้นไป ตัวอย่างการไล่ระดับสี:

ก่อนหน้านี้มีการใช้ภาพพื้นหลังเพื่อสร้างเอฟเฟกต์การไล่ระดับสี ตอนนี้คุณสามารถใช้ CSS3 เพื่อสร้างพื้นหลังไล่ระดับสีได้ องค์ประกอบที่มีการไล่ระดับสี CSS3 จะดูดีกว่าเมื่อซูมเข้ามากกว่ารูปภาพพื้นหลังแบบปลั๊กอิน เนื่องจากการไล่ระดับสีถูกสร้างขึ้นโดยเบราว์เซอร์โดยตรงไปยังพื้นที่ที่ระบุ

โปรดทราบว่าการไล่ระดับสี CSS เป็นภาพพื้นหลังที่เบราว์เซอร์สร้างขึ้น ไม่ใช่สีพื้นหลัง ดังนั้นจึงกำหนดให้เป็นค่าของคุณสมบัติภาพพื้นหลัง ซึ่งหมายความว่าสามารถระบุการไล่ระดับสีได้ไม่เพียงแต่เป็นค่าของคุณสมบัติ background-image เท่านั้น แต่ยังรวมถึงทุกที่ที่สามารถแทรกภาพพื้นหลังได้ เช่น ใน list-style-image และ background

CSS3 กำหนดการไล่ระดับสีสองประเภท:

• การไล่ระดับสีเชิงเส้น(การไล่ระดับสีเชิงเส้น) - การเปลี่ยนสีเป็นเส้นตรงอย่างราบรื่น
• การไล่ระดับสีแบบเรเดียล(การไล่ระดับสีแบบเรเดียล) - การเปลี่ยนสีอย่างราบรื่นจากจุดหนึ่งในทุกทิศทาง

การไล่ระดับสีเชิงเส้น

การไล่ระดับสีแบบเส้นตรงจะขยายเป็นเส้นตรง แสดงให้เห็นการเปลี่ยนแปลงที่ราบรื่นจากเฉดสีหนึ่งไปยังอีกสีหนึ่ง การไล่ระดับสีเชิงเส้นถูกสร้างขึ้นโดยใช้ฟังก์ชัน linear-gradient() ฟังก์ชั่นสร้างภาพที่มีการไล่ระดับสีเชิงเส้นระหว่างเฉดสีที่ระบุ ขนาดของการไล่ระดับสีสอดคล้องกับขนาดขององค์ประกอบที่ใช้

ฟังก์ชัน linear-gradient() รับอาร์กิวเมนต์ที่คั่นด้วยเครื่องหมายจุลภาคต่อไปนี้:

• อาร์กิวเมนต์แรกคือระดับของมุมหรือคำสำคัญที่กำหนดมุมทิศทางของเส้นไล่ระดับสี อาร์กิวเมนต์เพิ่มเติม
• รายการที่คั่นด้วยเครื่องหมายจุลภาคของสีตั้งแต่สองสีขึ้นไป โดยแต่ละสีสามารถตามด้วยตำแหน่งหยุดได้

การไล่ระดับสีเชิงเส้นที่ง่ายที่สุดต้องการเพียงสองอาร์กิวเมนต์ที่ระบุสีเริ่มต้นและสีสิ้นสุด:

Div ( ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (สีดำ, สีขาว); ความกว้าง: 200px; ความสูง: 200px; ) ลอง »

การส่งผ่านอาร์กิวเมนต์สองตัวไปยังฟังก์ชันจะตั้งค่าการไล่ระดับสีในแนวตั้งโดยมีจุดเริ่มต้นอยู่ที่ด้านบน

ทิศทางของเส้นไล่ระดับสีสามารถกำหนดได้สองวิธี:

การใช้ องศา เป็นอาร์กิวเมนต์แรก คุณสามารถส่งผ่านองศาของมุมของเส้นไล่ระดับสีได้ ซึ่งกำหนดทิศทางของการไล่ระดับสี ตัวอย่างเช่น มุม 0deg (ย่อมาจาก องศา - องศา) จะกำหนดเส้นไล่ระดับสีจากเส้นขอบด้านล่าง ขององค์ประกอบขึ้นไปด้านบน มุม 90 องศา กำหนดเส้นไล่ระดับสีจากซ้ายไปขวา เป็นต้น พูดง่ายๆ ก็คือ มุมบวกแทนการหมุนตามเข็มนาฬิกา มุมลบแทนการหมุนทวนเข็มนาฬิกา การใช้คำหลัก คำหลัก "ไปด้านบน", "ไปทางขวา", "ไปด้านล่าง" หรือ "ไปทางซ้าย" ยังสามารถส่งผ่านเป็นอาร์กิวเมนต์แรกได้ ซึ่งแสดงถึงมุมของเส้นไล่ระดับสี "0deg" "90deg" "180deg" " 270deg" ตามลำดับ

มุมยังสามารถตั้งค่าได้โดยใช้คำหลักสองคำ เช่น ที่มุมขวาบน - เส้นไล่ระดับสีจะมุ่งไปที่มุมขวาบน

ตัวอย่างของการไล่ระดับสีที่ระบุในทิศทางที่ต่างกัน:

div ( ระยะขอบ: 10px; ความกว้าง: 200px; ความสูง: 200px; float: left; ) #one ( ภาพพื้นหลัง: linear-gradient(ไปทางซ้าย, สีดำ, สีแดง); ) #two ( ภาพพื้นหลัง: linear-gradient( ไปทางซ้ายบน, ดำ, แดง); #three ( ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (65 องศา, ดำ, เหลือง); ) ลอง »

ตามที่กล่าวไว้ การไล่ระดับสีเชิงเส้นสามารถรวมรายการสีได้มากกว่าสองสี โดยคั่นด้วยเครื่องหมายจุลภาค และเบราว์เซอร์จะกระจายสีเท่าๆ กันทั่วทั้งพื้นที่ที่มีอยู่ทั้งหมด:

div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( ภาพพื้นหลัง: linear-gradient(ไปทางขวา, แดง, น้ำเงิน, เหลือง); ) #two ( ภาพพื้นหลัง: linear- ไล่ระดับสี (ซ้ายบน, น้ำเงิน, ขาว, น้ำเงิน ) ลอง »

หลังจากสี คุณสามารถระบุตำแหน่งหยุดได้ ซึ่งจะกำหนดตำแหน่งของสี (ที่สีหนึ่งเริ่มเปลี่ยนเป็นสีอื่น) โดยสัมพันธ์กับจุดเริ่มต้นและจุดสิ้นสุดของการไล่ระดับสี ตำแหน่งหยุดถูกระบุโดยใช้หน่วยหรือเปอร์เซ็นต์ที่รองรับ CSS เมื่อใช้เปอร์เซ็นต์ ตำแหน่งหยุดตำแหน่งจะถูกคำนวณขึ้นอยู่กับความยาวของเส้นไล่ระดับสี ค่า 0% คือจุดเริ่มต้นของการไล่ระดับสี 100% คือจุดสิ้นสุด

div ( ระยะขอบ: 10px; ความกว้าง: 200px; ความสูง: 200px; float: left; ) #one ( ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวาบน, สีน้ำเงิน, สีขาว 70%, สีน้ำเงิน); ) #two ( ภาพพื้นหลัง : การไล่ระดับสีเชิงเส้น (ไปทางขวา, เหลือง 10%, ขาว, แดง, ดำ 90%);) #three ( ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, ดำ 10%, เหลือง, ดำ 90%); ) ลอง »

ค่าสีสามารถระบุได้หลายวิธี เช่น การระบุชื่อสี การใช้ค่าเลขฐานสิบหก (HEX) การใช้ไวยากรณ์ RGB (RGBA) หรือ HSL (HSLA) ตัวอย่างเช่น การใช้การไล่ระดับสีที่มีความโปร่งใสสามารถใช้ร่วมกับสีพื้นหลังหรือรูปภาพใต้การไล่ระดับสีเพื่อสร้างเอฟเฟกต์ภาพที่น่าสนใจ:

div ( ระยะขอบ: 10px; ความกว้าง: 300px; ความสูง: 100px; สีพื้นหลัง: สีเขียว; ) #one ( พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางซ้าย, rgb (255,255,0), rgba (255,255,0,0)); ) #two ( พื้นหลัง: การไล่ระดับสีเชิงเส้น(rgb(255,255,255), rgba(255,255,255,0)); )

อัปเดตครั้งล่าสุด: 04/21/2016

การไล่ระดับสีแสดงถึงการเปลี่ยนสีที่ราบรื่นจากสีหนึ่งไปอีกสีหนึ่ง CSS3 มีการไล่ระดับสีในตัวจำนวนหนึ่งที่คุณสามารถใช้เพื่อสร้างพื้นหลังขององค์ประกอบได้

การไล่ระดับสีใน CSS ไม่ได้แสดงถึงคุณสมบัติพิเศษใดๆ พวกเขาเพียงแค่สร้างค่าที่กำหนดให้กับคุณสมบัติภาพพื้นหลัง

การไล่ระดับสีเชิงเส้นจะขยายเป็นเส้นตรงจากปลายด้านหนึ่งขององค์ประกอบไปยังอีกสีหนึ่ง ทำให้เกิดการเปลี่ยนแปลงที่ราบรื่นจากสีหนึ่งไปยังอีกสีหนึ่ง

หากต้องการสร้างการไล่ระดับสี คุณต้องระบุจุดเริ่มต้นและหลายสี เช่น:

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ซ้าย, ดำ, ขาว);

ในกรณีนี้ จุดเริ่มต้นของการไล่ระดับสีจะเป็นขอบด้านซ้ายขององค์ประกอบ ซึ่งระบุด้วยค่า left การไล่ระดับสี: สีดำและสีขาว นั่นคือเริ่มจากขอบซ้ายขององค์ประกอบไปทางขวาจะมีการเปลี่ยนแปลงจากสีดำเป็นสีขาวอย่างราบรื่น

มีข้อเสียเปรียบประการหนึ่งในการใช้การไล่ระดับสี - เบราว์เซอร์ที่หลากหลายบังคับให้คุณใช้คำนำหน้าผู้ขาย:

Webkit- /* สำหรับ Google Chrome, Safari, Microsoft Edge, Opera เวอร์ชันสูงกว่า 15 */ -moz- /* สำหรับ Mozilla Firefox */ -o- /* สำหรับ Opera เวอร์ชัน 15 ขึ้นไป (Opera 12) */

ดังนั้น การใช้การไล่ระดับสีแบบเต็มจะมีลักษณะดังนี้:

หากต้องการตั้งค่าเริ่มต้นของการไล่ระดับสี คุณสามารถใช้ค่าต่อไปนี้: ซ้าย (ซ้ายไปขวา), ขวา (ขวาไปซ้าย), บน (บนลงล่าง) หรือล่าง (ล่างขึ้นบน) ตัวอย่างเช่น การไล่ระดับสีแนวตั้งจะมีลักษณะดังนี้:

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านล่าง, สีดำ, สีขาว);

คุณยังสามารถกำหนดทิศทางในแนวทแยงโดยใช้ค่าสองค่า:

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ซ้ายบน, ดำ, ขาว);

นอกจากค่าเฉพาะเช่นด้านบนหรือซ้ายแล้ว คุณยังสามารถระบุมุมได้ตั้งแต่ 0 ถึง 360 ซึ่งจะกำหนดทิศทางของการไล่ระดับสี:

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (30 องศา, ดำ, ขาว);

หลังจากค่าของมุมแล้ว คำว่า deg จะถูกระบุ

ตัวอย่างเช่น 0deg หมายถึงการไล่ระดับสีเริ่มต้นที่ด้านซ้ายและเคลื่อนไปทางขวา ในขณะที่ 45deg หมายความว่าการไล่ระดับสีเริ่มต้นที่มุมซ้ายล่างและเคลื่อนไปที่มุม 45° ไปทางขวาบน

หลังจากกำหนดจุดเริ่มต้นของการไล่ระดับสีแล้ว คุณสามารถระบุสีหรือจุดอ้างอิงที่จะใช้ได้ ไม่จำเป็นต้องมีสองสี มีมากกว่านี้ก็ได้:

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, สีแดง, #ccc, สีน้ำเงิน);

สีที่ใช้ทั้งหมดมีการกระจายเท่าๆ กัน อย่างไรก็ตาม คุณยังสามารถระบุตำแหน่งพื้นหลังเฉพาะสำหรับจุดสีได้ เมื่อต้องการทำเช่นนี้ ค่าที่สองจะถูกเพิ่มหลังสี ซึ่งเป็นตัวกำหนดตำแหน่งของจุด

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ซ้าย, #ccc, สีแดง 20%, สีแดง 80%, #ccc);

การไล่ระดับสีซ้ำ

การใช้การไล่ระดับสีเชิงเส้นซ้ำคุณสามารถสร้างการไล่ระดับสีเชิงเส้นซ้ำได้ ตัวอย่างเช่น:

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้นซ้ำ (ซ้าย, #ccc 20px, สีแดง 30px, rgba (0, 0, 126, .5) 40px); ภาพพื้นหลัง: -moz-repeating-linear-gradient (ซ้าย, #ccc 20px, สีแดง 30px, rgba (0, 0, 126, .5) 40px); ภาพพื้นหลัง: -webkit-repeating-linear-gradient (ซ้าย, #ccc 20px, สีแดง 30px, rgba (0, 0, 126, .5) 40px);

ในกรณีนี้ การไล่ระดับสีเริ่มต้นที่ขอบด้านซ้ายขององค์ประกอบด้วยแถบสีเทา (#ccc) กว้าง 20 พิกเซล จากนั้นสูงสุด 30 พิกเซลจะเปลี่ยนเป็นสีแดง และจากนั้นสูงสุด 40 พิกเซลจะเปลี่ยนกลับไปเป็นสีฟ้าอ่อน (อาร์จีบีเอ(0, 0 , 126, .5)) จากนั้นเบราว์เซอร์จะทำการไล่ระดับสีซ้ำจนกว่าจะเต็มพื้นผิวขององค์ประกอบ

• การแปล

การทำงานแปลเกี่ยวกับโครงการ singlediv.com แสดงให้เห็นว่าเครื่องมือ CSS บางตัวมีแอปพลิเคชันที่กว้างกว่าที่ฉันเคยคิด แต่เพื่อให้สามารถค้นหาแอปพลิเคชันนี้ได้จำเป็นต้องเข้าใจคุณสมบัติของทรัพย์สินให้ชัดเจน ตัวอย่างที่เด่นชัดคือการไล่ระดับสีเชิงเส้นซึ่งลินน์ ฟิชเชอร์ใช้อย่างเชี่ยวชาญในงานของเธอ

ต้องการสร้างพื้นหลังไล่ระดับสีน่ารักบนเว็บไซต์ของคุณหรือไม่? ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (แดง, น้ำเงิน); พร้อม! ใช่ มันน่าเบื่อนิดหน่อย ดังนั้น หากคุณต้องการอะไรเพิ่มเติม ฉันขอแนะนำหน้านี้พร้อมเคล็ดลับ CSS และ MDN ตอนนี้คุณอยู่ที่นี่ไหม? จากนั้น เรามาดูบางอย่างเกี่ยวกับวิธีการทำงานของการไล่ระดับสีเชิงเส้น ขั้นแรก เรามาทบทวนไวยากรณ์ที่สามารถใช้ในฟังก์ชันการไล่ระดับสีเชิงเส้น:

การไล่ระดับสีเชิงเส้น ([จาก<угла>- ก่อน<стороны-или-угла>]?, );
ฟังก์ชันนี้ใช้อาร์กิวเมนต์แรกที่เป็นทางเลือกซึ่งระบุมุมของการไล่ระดับสี ซึ่งสามารถแสดงโดยใช้หน่วยการวัด (องศา รัศมี องศา การหมุน) หรือเป็นคีย์เวิร์ด (ด้านข้างหรือมุม

จากนั้นฟังก์ชันจะยอมรับรายการสี

ฟิลด์ไล่ระดับสี

รูปภาพไล่ระดับสีไม่มีมิติ มันไม่มีที่สิ้นสุดไม่เหมือนภาพพื้นหลังอื่นๆ ขนาดที่มองเห็นได้ถูกกำหนดโดยฟิลด์ไล่ระดับสีเช่น พื้นที่ที่มันแสดง

โดยทั่วไป เมื่อคุณใช้ภาพพื้นหลังไล่ระดับสีเชิงเส้นกับองค์ประกอบ DOM พื้นที่นั้นจะเป็นกรอบเส้นขอบขององค์ประกอบ (ซึ่งเป็นพื้นที่เดียวกับที่สีพื้นหลังปรากฏ)

อย่างไรก็ตาม หากคุณใช้คุณสมบัติ CSS ขนาดพื้นหลังและตั้งค่าเป็น 200px * 200px ฟิลด์ไล่ระดับสีจะมีขนาดนี้ และตามค่าเริ่มต้นจะวางไว้ที่มุมซ้ายบนขององค์ประกอบ DOM เว้นแต่ คุณยังตั้งค่าตำแหน่งพื้นหลังด้วย

ดังนั้นเมื่อคุณอ่านส่วนต่อไปนี้ โปรดจำไว้ว่ากล่องไล่ระดับสีไม่ได้อยู่ในตำแหน่งเดียวกันหรือมีขนาดเท่ากับองค์ประกอบ DOM ที่คุณใช้การไล่ระดับสีเสมอไป

เส้นไล่ระดับสี

ในเขตข้อมูลการไล่ระดับสี เส้นที่ลากผ่านจุดศูนย์กลางและตามที่มีการกระจายสีเรียกว่าเส้นไล่ระดับสี เส้นนี้สามารถอธิบายได้ง่ายขึ้นโดยการอธิบายมุมไล่ระดับสี ดังนั้นเราจะกล่าวถึงรายละเอียดเพิ่มเติมในหัวข้อถัดไป

มุมไล่ระดับ

เห็นได้ชัดว่ามุมของการไล่ระดับสีเชิงเส้นถูกใช้เพื่อกำหนดทิศทางของการไล่ระดับสี แต่ลองมาดูแง่มุมนี้ในรายละเอียดเพิ่มเติม

หาก C เป็นจุดศูนย์กลางของสนามไล่ระดับสี แล้ว A คือมุมระหว่างเส้นแนวตั้งที่ผ่าน C และเส้นไล่ระดับสีที่ผ่าน C เช่นกัน โดยมีการกระจายสีหยุดของการไล่ระดับสี

มุมนี้สามารถกำหนดได้สองวิธี:

การใช้คำหลักคำใดคำหนึ่ง: ขึ้นไปบน (ขึ้น) ลงล่าง (ลง) ซ้าย (ซ้าย) ไปทางขวา (ขวา) ไปทางขวาบน (ขวาบน) ซ้ายบน (ซ้ายบน) ไปทางขวาล่าง ( ลงขวา) ไปทางซ้ายล่าง (ซ้ายล่าง);
หรือโดยการกำหนดมุมด้วยตัวเลขและหน่วยวัด เช่น 45 องศา (45 องศา) 1 รอบ (1 รอบ)

หากไม่ได้ระบุมุม ตามค่าเริ่มต้น มุมนั้นจะชี้ลง (นั่นคือ 180 องศาหรือ 0.5 รอบ):

ในภาพนี้และภาพต่อไปนี้ กล่องไล่ระดับสีล้อมรอบด้วยสี่เหลี่ยม และเส้นไล่ระดับสีคือเส้นสีเทาหนาที่ลากผ่านจุดศูนย์กลางตามสีต่างๆ ที่ปรากฏ

ในตัวอย่างด้านบน ไม่มีการระบุมุม ดังนั้นการไล่ระดับสีจากสีขาวเป็นสีแดงจะย้ายจากบนลงล่าง ซึ่งสอดคล้องกับคีย์เวิร์ดไปที่ด้านล่าง ดังที่แสดงด้านล่าง:

และดังที่แสดงใน 2 รูปภาพถัดไป ด้านบนตรงกับมุมศูนย์องศา:

จุดสำคัญอีกประการที่ควรพิจารณาเมื่อใช้คีย์เวิร์ดมุมก็คือ ทางด้านขวาบน (หรือคีย์เวิร์ดมุมอื่นๆ) ขึ้นอยู่กับขนาดของช่องไล่ระดับสี

ตรรกะก็คือ หากคุณต้องการสร้างการไล่ระดับสีจากสีแดงเป็นสีน้ำเงินไปยังมุมขวาบนขององค์ประกอบ องค์ประกอบนั้นก็จะมีสีน้ำเงินอยู่ที่มุมขวาบน และสีม่วงที่อยู่ตรงกลางของการไล่ระดับสีจะก่อตัวรอบๆ เส้นที่ต่อจากซ้ายบนไปยังมุมขวาล่าง นี่คือลักษณะที่ปรากฏในภาพ:

ดังนั้นที่มุมขวาบนไม่ได้หมายความว่าเส้นไล่ระดับสีจะผ่านมุมขวาบน และไม่ได้หมายความว่ามุมไล่ระดับสีจะเป็น 45 องศาด้วยซ้ำ!

มาดูกันว่าเส้นไล่ระดับสีเคลื่อนไหวอย่างไรเมื่อมุมเปลี่ยนไปด้วยภาพเคลื่อนไหวต่อไปนี้:

ในภาพเคลื่อนไหวนี้ มุมจะเอียงตั้งแต่ 0 ถึง 360 องศา โดยเพิ่มขึ้นทีละ 10 องศา ความละเอียดต่ำของ GIF ช่วยให้มองเห็นได้ดีขึ้นว่าสีต่างๆ ปรากฏเป็น "เส้น" ที่ตั้งฉากกับเส้นไล่ระดับสีเสมออย่างไร

จำสิ่งที่เรารู้เกี่ยวกับมุมไล่ระดับสี:

มุมจะวัดระหว่างเส้นไล่ระดับสีกับเส้นที่ออกจากจุดศูนย์กลางของสนามไล่ระดับสีและเลื่อนขึ้นไป
ดังนั้น 0 องศาจึงหมายถึงขึ้น
ค่ามุมมาตรฐาน หากไม่ได้ระบุ จะลดลง ซึ่งก็คือ 180 องศา
คีย์เวิร์ดมุมขึ้นอยู่กับขนาดของช่องไล่ระดับสี

ความยาวเส้นไล่ระดับสี

ก่อนที่เราจะเห็นว่าสีกระจายไปตามเส้นไล่ระดับสีอย่างไร เราต้องอธิบายสิ่งหนึ่งก่อน คุณอาจสังเกตเห็นในแอนิเมชั่นก่อนหน้านี้ว่าบางครั้งสีต่างๆ จะถูกวางไว้นอกกล่องไล่ระดับสี ซึ่งอาจดูแปลกเล็กน้อยเมื่อมองแวบแรก แต่ก็สมเหตุสมผลหากคุณรู้เหตุผล

ดูตัวอย่าง:

เราต้องการการไล่ระดับสีแดงถึงน้ำเงินที่มุม 45 องศา และเนื่องจากอัตราส่วนภาพของช่องไล่ระดับสี เส้นไล่ระดับสีจึงไม่สามารถทะลุมุมขวาบนได้

แต่เบราว์เซอร์ต้องการ (นั่นคือ ข้อกำหนดบังคับ) ทำให้มุมขวาบนเป็นสีน้ำเงินบริสุทธิ์ หากเราทำให้เส้นไล่ระดับสีเริ่มต้นและสิ้นสุดที่ขอบของฟิลด์ สีน้ำเงินก็จะกินพื้นที่มากขึ้น และการไล่ระดับสีจะไม่กระจายออกไปมากนัก

ดังนั้น เพื่อที่จะทำเช่นนี้ บางครั้งเส้นไล่ระดับสีจะต้องขยายเกินช่องไล่ระดับสี ในเวลาเดียวกัน มันค่อนข้างง่ายที่จะรู้ว่ามันเริ่มต้นที่ไหนและสิ้นสุดที่ไหน เพียงลากเส้นที่ลากผ่านมุมที่ใกล้ที่สุดและตั้งฉากกับเส้นไล่ระดับสี จุดที่เส้นนี้ตัดกับเส้นไล่ระดับสีคือตำแหน่งเริ่มต้น/สิ้นสุด

ที่จริงแล้ว หากคุณระบุความกว้างของช่องไล่ระดับสี W ความสูง H และมุมของการไล่ระดับสี ความยาวของเส้นไล่ระดับสีจะเป็น:

หน้าท้อง(W * บาป(A)) + หน้าท้อง(H * cos(A))

สี

สีแสดงถึงรายการที่คั่นด้วยเครื่องหมายจุลภาค ซึ่งแต่ละองค์ประกอบสามารถกำหนดได้ดังต่อไปนี้:
<цвет> [<процентное соотношение> | <длина>]?

ดังนั้นจึงไม่จำเป็นต้องระบุตำแหน่งที่ควรวางสีตามเส้นไล่ระดับสี ตัวอย่างเช่น:

ไม่มีสีใดมีตำแหน่งของตัวเอง ดังนั้นเบราว์เซอร์จึงกำหนดตำแหน่งของตนเอง

ในตัวอย่างที่ง่ายที่สุดที่มีเพียง 2 สี สี 1 จะถูกวางไว้ที่ 0% (ที่จุดเริ่มต้นของเส้นไล่ระดับสี) และสี 2 ที่ 100% (ที่จุดสิ้นสุดของเส้นไล่ระดับสี)

จากนั้น หากคุณเพิ่มสีที่สาม คุณจะยังคงมีสี 1 ที่ 0% สีที่ 2 ที่ 50% และสีที่ 3 ที่ 100% และอื่นๆ

ในตัวอย่างข้างต้น มีการกำหนดสีหยุดไว้ 5 สี และเบราว์เซอร์คำนวณตำแหน่งสัมพัทธ์เป็น 0%, 25%, 50%, 75%, 100% เหตุผลก็คือการกระจายตัวสม่ำเสมอไปตามสนามเกรเดียนต์

ตำแหน่งสีสามารถแสดงเป็นเปอร์เซ็นต์ (สัมพันธ์กับขนาดของเส้นไล่ระดับสี) หรือเป็นความยาว CSS (โดยที่หน่วย CSS ใดๆ ใช้ได้)

นี่คือตัวอย่าง:

อย่างที่คุณเห็น แต่ละสีจาก 5 สีจะมีตำแหน่งของตัวเอง โดยระบุเป็นพิกเซล ตำแหน่งเหล่านี้คำนวณจากจุดเริ่มต้นของเส้นไล่ระดับสี

การใช้ตำแหน่งเหล่านี้คุณจะได้รับเอฟเฟกต์ที่น่าสนใจ ตัวอย่างเช่น คุณสามารถใช้การไล่ระดับสีเพื่อไม่ให้วาดการไล่ระดับสีเอง แต่เหลือสีไว้สองสามสี:

รูปภาพด้านบนมี 7 สีและตั้งค่าไว้เพื่อให้สีถัดไปเริ่มต้นที่ตำแหน่งเดียวกันกับสีสุดท้าย ซึ่งหมายความว่าเบราว์เซอร์ไม่จำเป็นต้องเติมช่องว่างระหว่างสีหยุดสองสีด้วยการไล่ระดับสี

แน่นอนว่าทั้งหมดนี้เป็นเรื่องที่ดีและตลก แต่จะเกิดอะไรขึ้นเมื่อคุณผสมสีที่มีตำแหน่งกับสีที่ไม่อยู่ในตำแหน่ง? จากนั้น คุณจะบังคับให้เบราว์เซอร์ทำงานหนักขึ้น และขอให้เบราว์เซอร์กระจายสีที่คุณไม่ได้ระบุตำแหน่งโดยอัตโนมัติ:

ในตัวอย่างง่ายๆ นี้ สีที่สอง (สีส้ม) ไม่มีตำแหน่ง ดังนั้นเบราว์เซอร์จะกำหนดและค้นหาตำแหน่งที่เหมาะสมระหว่างสีที่ระบุก่อนหน้าและสีถัดไป วิธีนี้ง่ายมาก เนื่องจากเพื่อนบ้านที่อยู่ติดกันของสีที่สองมีตำแหน่งของตนเอง แต่ถ้ามีเพียงบางสีเท่านั้นที่มีตำแหน่ง หรือหากสีก่อนหน้าหรือสีถัดไปไม่มีตำแหน่ง สิ่งต่างๆ ก็จะซับซ้อนมากขึ้น

ลองดูตัวอย่างบางส่วน:

ในตัวอย่างข้างต้น เฉพาะสีที่สาม (สีเหลือง) เท่านั้นที่อยู่ในตำแหน่ง 30% ดังนั้น เพื่อกระจายสีอื่นๆ ทั้งหมดได้ดีขึ้น สีแรกจะอยู่ที่ 0% สีสุดท้ายอยู่ที่ 100% และสีที่เหลือจะกระจายอยู่ระหว่างนั้น (เพื่อให้สีส้มจบลงโดยตรงระหว่าง 0% ถึง 30% และสีแดงระหว่าง 30% ถึง 100%) .

ในตัวอย่างด้านบน สีแรกและสีสุดท้ายถูกวางตำแหน่งไว้ ดังนั้นสีที่เหลือจึงมีการกระจายเท่าๆ กันระหว่างสองสีนี้

แน่นอนว่ามันจะง่ายเกินไปถ้า 0% และ 100% เป็นขีดจำกัดที่เข้มงวดซึ่งไม่สามารถเกินได้ แต่ดังที่คุณเห็นจากตัวอย่างก่อนหน้านี้ สีสุดท้ายจะอยู่ที่ 120% ดังนั้นสีอื่นๆ ทั้งหมดจึงต้องกระจายตามตำแหน่งนี้ (จุดเริ่มต้นเริ่มต้นในกรณีนี้ยังคงเป็น 0%)

และถ้าคุณต้องการให้เบราว์เซอร์ของคุณทำงานหนักขึ้น ทำไมไม่ระบุลำดับของตำแหน่งล่ะ?

ในความเป็นจริง สีควรจะเป็นระเบียบ แต่ไม่มีสิ่งใดขัดขวางไม่ให้คุณทำเช่นนั้น และจะไม่มีอะไรเลวร้ายเกิดขึ้นหากคุณไม่ทำเช่นนั้น เบราว์เซอร์ของคุณจะแก้ไขทุกอย่างตามที่แสดงด้านล่าง:

เริ่มจากสีแรกกันก่อน (สีแดง) ซึ่งอยู่ที่ 30% จากนั้นสีที่สองจะอยู่ที่ 10% ซึ่งไม่ถูกต้องแล้วเนื่องจากตามที่ระบุไว้ข้างต้น ควรระบุสีตามลำดับจากน้อยไปหามาก ดังนั้นที่นี่เบราว์เซอร์จะแก้ไขตำแหน่งของสีที่สองและตั้งค่าให้อยู่ในตำแหน่งเดียวกันกับสีก่อนหน้า (30%) ถัดมาเป็นสีที่สาม (สีเหลือง) 60% ซึ่งถูกต้อง แต่ตามมาด้วยสีที่สี่ (สีน้ำเงิน) 40% ตำแหน่งจะถูกปรับอีกครั้งและตั้งค่าเป็นค่าเดียวกันกับสีตำแหน่งก่อนหน้า

ท้ายที่สุด ดังที่แสดงในตัวอย่างข้างต้น สีสุดท้าย (สีน้ำเงิน) อยู่ในตำแหน่งที่ไม่ถูกต้อง และเบราว์เซอร์ทำให้ตำแหน่งเหมือนกับสีก่อนหน้า ซึ่งในกรณีนี้ไม่ใช่ทั้งเพื่อนบ้านที่อยู่ติดกัน (สีเหลือง) หรือเพื่อนบ้านของสี ที่อยู่ข้างหน้า (สีส้ม) จึงควรกลับไปสีแรก (สีแดง) วิธีนี้ทำให้สีทั้งหมดระหว่างสีแดงและสีน้ำเงินถูกตั้งค่าไว้ที่ 30% ดังนั้นจึงมองไม่เห็น

เครื่องมือ

ภาพหน้าจอทั้งหมดในบทความนี้มาจากเครื่องมือง่ายๆ ที่ฉันสร้างบน Codepen ซึ่งช่วยให้คุณเข้าสู่ฟังก์ชันการไล่ระดับสีเชิงเส้นและดูกล่องไล่ระดับสี เส้นไล่ระดับสี มุม และข้อมูลสีที่ด้านบนขององค์ประกอบ

เครื่องมือนี้มีข้อบกพร่องและข้อจำกัดทุกประเภท (ดูความคิดเห็นของ JavaScript) ดังนั้นอย่าคาดหวังอะไรมากจากเครื่องมือนี้

แท็ก:

• ซีเอสเอส
• การไล่ระดับสีเชิงเส้น

เพิ่มแท็ก

ก! การไล่ระดับสีเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการปรับแต่งสี CSS3- แทนที่จะใช้รูปภาพเพื่อสร้างเอฟเฟกต์การไล่ระดับสีบนหน้าเว็บ การใช้งานจะมีประโยชน์มากกว่า การไล่ระดับสี CSS3และด้วยเหตุนี้จึง "ทำให้ไซต์สว่างขึ้น" เนื่องจากผู้ใช้จะไม่ต้องเสียเวลาและปริมาณการรับส่งข้อมูลในการโหลดภาพพื้นหลัง การไล่ระดับสีมีสองประเภทหลัก: แนวรัศมีและเชิงเส้น โพสต์ของวันนี้จะเกี่ยวกับพวกเขา

การไล่ระดับสีเชิงเส้น

ดังที่การจำแนกประเภทกล่าวไว้ว่า การไล่ระดับสีใน CSS3เป็นภาพ ไม่มีคุณสมบัติพิเศษสำหรับพวกเขา และโฆษณาใช้คุณสมบัติภาพพื้นหลัง

โดยทั่วไป ไวยากรณ์การไล่ระดับสี (เชิงเส้น) จะมีลักษณะดังนี้:

1 2 3 4 5 6 7

div( ภาพพื้นหลัง : -webkit-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; ภาพพื้นหลัง : -moz-linear-gradient (ด้านบน , #FF5A00 0% , #FFAE00 100% ) ; ภาพพื้นหลัง : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; ภาพพื้นหลัง : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; }

เรามาพูดถึงทุกอย่างตามลำดับกัน

ประการแรก การไล่ระดับสีเชิงเส้นจะถูกประกาศโดยฟังก์ชัน linear-gradient() ฟังก์ชั่นมีสามความหมายหลัก ค่าแรกกำหนดตำแหน่งเริ่มต้น ตัวอย่างระบุด้านบนเช่น ตำแหน่งเริ่มต้นจากด้านบน คุณยังสามารถใช้ด้านล่าง ซ้ายและขวา;

หากมุมเป็นลบ ตำแหน่งจะเปลี่ยนจากมุมล่างซ้ายไปด้านซ้ายบน

ค่าที่สองของฟังก์ชันคือสีเริ่มต้นและตำแหน่งหยุดซึ่งระบุเป็นเปอร์เซ็นต์ ไม่จำเป็นต้องประกาศตำแหน่งนี้ เบราว์เซอร์จะใช้ค่าเริ่มต้นเป็น 0% สำหรับสีแรก

ค่าสุดท้ายคือสีที่สองและตำแหน่งหยุด ค่าเริ่มต้นเป็น 100% ค่าที่รุนแรงเหล่านี้หมายความว่าสีแรกเริ่มเปลี่ยนเป็นสีที่สองทันที อย่างไรก็ตาม หากเราตั้งค่าสีแรกเป็น 50% สีจะเริ่มเปลี่ยนไปเป็นสีที่สองจากตรงกลางของความสูงที่มีอยู่เท่านั้น นี่คือลักษณะของโค้ด:

เราได้แถบที่มีความสูงเท่ากัน ด้วยขอบที่ชัดเจนจะไม่มีการเปลี่ยนสี เพื่อให้เข้าใจวิธีการทำงานได้ดีขึ้น ให้ทดลองกับค่าต่างๆ

การไล่ระดับสีแบบรัศมี เช่นเดียวกับการไล่ระดับสีเชิงเส้น ได้รับการประกาศเป็นฟังก์ชัน เฉพาะการไล่ระดับสีแบบรัศมี () เท่านั้น นอกจากนี้ยังมีค่าพื้นฐาน: นี่คือรูปร่างของการไล่ระดับสีในแนวรัศมี (วงกลม - วงกลมหรือวงรี - วงรี) สีเริ่มต้นและสีสุดท้าย ไวยากรณ์มีดังนี้:

div( พื้นหลัง : การไล่ระดับสีแบบรัศมี ( วงกลม , #F9E497 , #FFAE00 ) ; }

หากคุณไม่ได้ระบุรูปร่าง ค่าเริ่มต้นจะเป็นวงรี

นอกจากนี้ ตำแหน่งกึ่งกลางของการไล่ระดับสีจะถูกตั้งค่าตามค่าเริ่มต้น ซึ่งสามารถเปลี่ยนแปลงได้ สามารถระบุตำแหน่งได้โดยใช้คำสั่ง (บน ล่าง ซ้าย ขวา และกึ่งกลาง) ตลอดจนการผสมกัน หรือระบุเป็นเปอร์เซ็นต์หรือพิกเซล

ชุดคำสั่ง:

• ตรงกลางด้านบน - ด้านบน - 50% 0%;
• ที่มุมซ้ายบน - ซ้ายบน - 0% 0%;
• ที่มุมขวาบน - บนขวา - 100% 0%;
• ตรงกลาง - ตรงกลาง - 50% 50%;
• กลางซ้าย - กลางซ้าย - 0% 50%;
• ตรงกลางขวา - ตรงกลางขวา - 100% 50%;
• กลางล่าง - ล่าง - 50% 100%;
• ที่มุมล่างซ้าย - ล่างซ้าย - 0% 100%;
• ที่มุมขวาล่าง - ล่างขวา - 100% 100%

นี่คือตัวอย่างที่มีเปอร์เซ็นต์:

div( ภาพพื้นหลัง : การไล่ระดับสีแบบรัศมี (70% 20% , วงกลม , #F9E497 , #FFAE00 ) ; }

ค่าแกนแรก เอ็กซ์ที่สองใน ยู.

คุณยังสามารถกำหนดขนาดของการไล่ระดับสีในแนวรัศมีได้ ขนาดจะแสดงด้วยช่องว่างหลังรูปร่างไล่ระดับสี ใช้ตามค่าเริ่มต้น มุมไกลที่สุด(ไปยังมุมไกล) การคำนวณจะดำเนินการจากจุดศูนย์กลางของการไล่ระดับสีถึง:

เพื่อให้เข้าใจสิ่งนี้ได้ดีขึ้น เรามาดูตัวอย่างกัน การไล่ระดับสีรูปทรงวงรีโดยมีสีเริ่มต้นเป็นสีขาวและสีสิ้นสุดเป็นสีน้ำเงิน:

div( ภาพพื้นหลัง : การไล่ระดับสีแบบรัศมี (230px 50px , วงรีด้านที่ใกล้ที่สุด, สีขาว , สีน้ำเงิน ) ; }

ขนาดคำนวณจากระยะห่างถึงด้านใกล้ จะเห็นได้ว่าด้านบนอยู่ใกล้แนวแกนมากขึ้น ยและทิ้งไว้ตามแกน เอ็กซ์.

และตอนนี้ไปไกลแล้ว:

div( ภาพพื้นหลัง : การไล่ระดับสีแบบรัศมี (230px 50px , วงรีด้านที่ไกลที่สุด, สีขาว , สีน้ำเงิน ) ; }

ผลลัพธ์อย่างที่พวกเขาพูดนั้นชัดเจน ขนาดคำนวณจากระยะทางถึงด้านไกล

ในการไล่ระดับสีแบบรัศมีและเชิงเส้น สามารถใช้ตำแหน่งหยุดสำหรับสีได้ ฉันอยากจะทราบด้วยว่าหากคุณต้องการความโปร่งใสของสี คุณควรใช้ rgba

div( ภาพพื้นหลัง : การไล่ระดับสีเชิงเส้น (ด้านบน , rgba (255 , 90 , 0 , 0.2 ) , rgba (255 , 174 , 0 , 0.2 ) ) ; }

ช่องอัลฟ่าอันสุดท้ายและเท่ากับ 0.2 ระบุว่ามีการใช้สีเพียง 20% ของ 100%

ในทั้งสองประเภท การไล่ระดับสี CSS3คุณไม่สามารถใช้สองสีได้ แต่มีหลายสี

div( ภาพพื้นหลัง : การไล่ระดับสีเชิงเส้น (บน , แดง , ส้ม , เหลือง , เขียว , น้ำเงิน , คราม , ม่วง ) ; }

สำหรับทั้งสองประเภท สามารถใช้สีซ้ำได้ นั่นคือวงจรเกิดขึ้นจากค่าเหล่านี้ การทำซ้ำฟังก์ชันการไล่ระดับสี, การทำซ้ำ-เชิงเส้น-การไล่ระดับสี() สำหรับเส้นตรง และ การทำซ้ำ-รัศมี-การไล่ระดับสี() สำหรับรัศมี

div( ภาพพื้นหลัง : การไล่ระดับสีแบบรัศมีซ้ำ ( สีแดง , สีน้ำเงิน 20px , สีแดง 40px ) ; }

0% , #FFAE00 100% ) ; /* สำหรับไฟร์ฟอกซ์ */
ภาพพื้นหลัง : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* สำหรับ IE 10+ */
ภาพพื้นหลัง : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* สำหรับโอเปร่า */
ภาพพื้นหลัง : การไล่ระดับสีเชิงเส้น (ด้านบน , #FF5A00 0% , #FFAE00 100% ) ; /* ไวยากรณ์มาตรฐาน */
}

div(
ตัวกรอง : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;
}

โดยที่ 33 ถัดจากแฮชคือเปอร์เซ็นต์ของความอิ่มตัวของสี

ฉันหวังว่าบทความนี้จะเป็นประโยชน์สำหรับคุณและหัวข้อที่กล่าวถึงก็ครอบคลุมครบถ้วน

หากต้องการติดตามบทความและบทเรียนล่าสุด โปรดสมัครรับข้อมูล

การไล่ระดับสี CSS ช่วยให้คุณสร้างพื้นหลังที่มีสองสีขึ้นไปที่เปลี่ยนจากสีหนึ่งไปอีกสีหนึ่งได้อย่างราบรื่น พวกเขาอยู่กับเรามาเป็นเวลานานและมีการรองรับเบราว์เซอร์ที่ค่อนข้างดี เบราว์เซอร์สมัยใหม่ส่วนใหญ่เข้าใจโดยไม่ต้องใส่คำนำหน้า สำหรับ IE9 และเก่ากว่านั้นจะมีตัวกรองไล่โทนสี และสำหรับ IE9 คุณสามารถใช้ SVG ได้

สามารถใช้การไล่ระดับสีได้ทุกที่ที่ใช้รูปภาพ โดยสามารถระบุในเนื้อหาหรือ border-image ในพื้นหลังเป็นรายการหัวข้อย่อยได้

การไล่ระดับสีเชิงเส้น

การไล่ระดับสีเชิงเส้นนั้นค่อนข้างใช้งานง่าย สำหรับการไล่ระดับสีพื้นฐานที่สุด เพียงตั้งค่าสีเริ่มต้นและสีสิ้นสุด:

พื้นหลัง: การไล่ระดับสีเชิงเส้น (สีส้ม, ทอง);

สามารถมีสีใดก็ได้มากกว่าสองสี คุณยังสามารถควบคุมทิศทางของการไล่ระดับสีและขอบเขต (จุดหยุด) ของสีได้อีกด้วย

ทิศทางสามารถระบุเป็นองศาหรือคำสำคัญได้

คำสำคัญ:ไปด้านบน = 0deg ; ไปทางขวา = 90deg; ด้านล่าง = 180deg - ค่าเริ่มต้น; ไปทางซ้าย = 270 องศา

สามารถรวมคำหลักเพื่อสร้างการไล่ระดับสีในแนวทแยง เช่น ซ้ายบน

ด้านล่างนี้คุณจะเห็นว่าทิศทางต่างๆ ทำงานอย่างไรในการยืดจากม่วงไปจนถึงเหลือง:

นี่คือโค้ดสำหรับสแควร์แรก เช่น:

ซ้ายบน ( พื้นหลัง: การไล่ระดับสีเชิงเส้น (ซ้ายบน, สีม่วง, สีแดงเข้ม, สีส้มแดง, ทอง); )

สิ่งหนึ่งที่ต้องจำก็คือที่มุมขวาบนนั้นไม่เหมือนกับ 45deg สีไล่ระดับสีจะตั้งฉากกับเส้นทิศทางการไล่ระดับสี ที่มุมขวาบน เส้นจะลากจากซ้ายล่างไปยังมุมขวาบน โดยมีขนาด 45 องศา ซึ่งจะอยู่ที่มุมนี้อย่างเคร่งครัด โดยไม่คำนึงถึงขนาดของภาพ

ความแตกต่างที่เห็นได้ชัดเจนในรูปสี่เหลี่ยม:

คุณยังสามารถตั้งค่าจุดหยุดสำหรับการไล่ระดับสีได้ โดยค่าจะระบุเป็นหน่วยหรือเปอร์เซ็นต์ และอาจมากกว่า 100% และน้อยกว่า 0%

ตัวอย่างการตั้งค่าเป็น % ใน em และค่าที่เกินขอบเขตขององค์ประกอบ:

ยิ่งจุดหยุดของสีใกล้เคียงอยู่ใกล้มากเท่าไร ขอบเขตระหว่างสีเหล่านั้นก็จะยิ่งชัดเจนมากขึ้นเท่านั้น วิธีนี้จะทำให้คุณสามารถสร้างพื้นหลังลายทางได้อย่างง่ายดาย:

นี่คือวิธีที่คุณสามารถสร้างพื้นหลังสำหรับคอลัมน์ด้านข้างโดยขยายจนสุดความสูงทั้งหมดขององค์ประกอบหลัก:

แถบบนพื้นหลังของแถบด้านข้างเป็นการไล่ระดับสีอีกแบบหนึ่งที่ประกอบด้วยการสลับความโปร่งใสแบบเต็มและสีขาวที่มีความโปร่งใส 30% การไล่ระดับสีด้วยสีโปร่งแสงนั้นสะดวกเพราะสามารถนำไปใช้กับพื้นหลังของสีใดก็ได้

การไล่ระดับสีในตัวอย่างถูกตั้งค่าเป็นโค้ดยาวที่ซับซ้อน เนื่องจากควรวางแถบไว้เหนือพื้นหลังของแถบด้านข้างเท่านั้น หากคุณไม่พยายามทำให้ทุกอย่างเป็นพื้นหลังสำหรับบล็อกเดียว คุณสามารถแก้ปัญหาได้โดยใช้องค์ประกอบเทียม

หากไม่มีข้อจำกัด โค้ดอาจสั้นกว่านี้มาก:

แสง ( พื้นหลัง: พีชพัฟ เชิงเส้นไล่ระดับสี (90deg, rgba (255, 255, 255, 0) 50%, rgba (255, 255, 255, .4) 50%) ศูนย์กลาง ศูนย์ / 2em; ) .dark ( พื้นหลัง: steelblue การไล่ระดับสีเชิงเส้น (rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, .2) 50%) ศูนย์กลางตรงกลาง / 100% 1em )

ในบรรทัดแรก เราตั้งค่าสีพื้นหลังขององค์ประกอบ ประเภท และทิศทาง (สามารถละสีและทิศทางได้) ในบรรทัดที่สอง เรากำหนดสีไล่ระดับสีและเส้นขอบระหว่างสีเหล่านั้น ในบรรทัดที่สาม เรากำหนดตำแหน่งและ ขนาดของภาพที่ได้ ส่วนที่สำคัญที่สุดคือขนาด ตามค่าเริ่มต้น พื้นหลังจะถูกทำซ้ำ ดังนั้นรูปแบบที่ได้จะเติมเต็มพื้นหลังขององค์ประกอบ ง่ายและเข้าใจง่ายมาก :)

ข้อมูลทั้งหมดสามารถทำได้ในบรรทัดเดียว แต่เพื่อความสะดวกในการอ่าน จะสะดวกกว่าถ้าเขียนหลายๆ บรรทัด โดยเฉพาะสำหรับการไล่ระดับสีที่ซับซ้อน

สิ่งสำคัญที่ควรทราบคือคีย์เวิร์ดที่โปร่งใสหมายถึงสีดำโปร่งใส ไม่ใช่สีขาวโปร่งใส ดังนั้นหากคุณใช้ใน Firefox คุณจะพบสิ่งนี้:

เพื่อหลีกเลี่ยงปัญหานี้ ให้ใช้สีโปร่งใสของเฉดสีที่ต้องการ เช่น สีขาว: rgba(255, 255, 255, 0) หรือสีดำ rgba(0, 0, 0, 0) คุณสามารถอ่านเกี่ยวกับวิธีการต่างๆ ในการตั้งค่าสีได้

คุณสามารถใช้เพื่อค้นหาสัญลักษณ์ rgb ของสีใดสีหนึ่งได้ CSS.coloratumเครื่องดนตรีจาก Lea Verou

นอกเหนือจากการไล่ระดับสีเชิงเส้นตามปกติแล้ว คุณยังสามารถสร้างการไล่ระดับสีแบบเส้นตรงซ้ำได้ - การไล่ระดับสีแบบซ้ำ

รหัสตัวอย่าง:

พื้นหลัง: การไล่ระดับสีเชิงเส้นซ้ำ (สีเขียว, สีเขียว .5em, โปร่งใส .5em, โปร่งใส 1em);

น่าเสียดายที่การไล่ระดับสีซ้ำๆ นั้นมีพฤติกรรมที่ไม่ได้ตั้งใจและเหมาะสำหรับรูปแบบที่ไม่สนใจความแม่นยำเท่านั้น หากคุณต้องการความแม่นยำ ให้ใช้ linear-gradient ร่วมกับ background-size และ background-repeat

การไล่ระดับสีมีข้อจำกัดเช่นเดียวกับกล่องเงา: ไม่สามารถกำหนดสีหรือทิศทางแยกกันได้ สิ่งนี้นำไปสู่การทำซ้ำโค้ดและความจำเป็นเร่งด่วนในการใช้ตัวประมวลผลล่วงหน้าเมื่อสร้างการไล่ระดับสีที่ซับซ้อน

ข้อจำกัดอีกประการหนึ่งคือการไล่ระดับสีไม่เคลื่อนไหว ซึ่งสามารถแก้ไขได้ในระดับหนึ่ง

หากต้องการสร้างการไล่ระดับสีข้ามเบราว์เซอร์อย่างรวดเร็ว มีเครื่องมือที่สะดวกมาก: colorzilla.com/gradient-editor/- นอกจากโค้ดสำหรับเบราว์เซอร์รุ่นใหม่แล้ว ยังเสนอโค้ดสำหรับ IE และ SVG รุ่นเก่าในวันที่ 9 อีกด้วย

เมื่อใช้ร่วมกับการควบคุมภาพพื้นหลังขั้นพื้นฐาน การไล่ระดับสีจะทำให้คุณมีความสามารถสูงสุดในการสร้างพื้นหลังที่มีระดับความซับซ้อนที่แตกต่างกันโดยไม่ต้องใช้ภาพเลย คุณสามารถใช้การไล่ระดับสีเพื่อสร้างรูปแบบที่ซับซ้อนและน่าสนใจได้ แต่นั่นเป็นหัวข้อที่แตกต่างไปจากเดิมอย่างสิ้นเชิง