การไล่ระดับสีพื้นหลังบนบล็อก

400x400px สีจุดไล่ระดับสีสามารถเขียนในรูปแบบใดก็ได้ที่มีอยู่ใน CSS, รหัสฐานสิบหกรูปแบบ RGB

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

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

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

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (-110deg, #ee82ee, #ff0000);

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

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (145deg, #ee82ee, slateblue, #ffd86a, สีม่วง);

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

ความยาวช่วงการเปลี่ยนภาพ

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

ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (#92009b 20%, #f5e944 90%, #00ffa2);

ในโค้ดของเรา หลังจากสี #92009b ค่า 20% จะถูกระบุ เนื่องจากอยู่ใกล้จุดยึดจุดแรก ซึ่งหมายความว่า 20% ของความยาวขององค์ประกอบจะถูกทาสีด้วยสีที่ระบุ หลังจากการไล่ระดับสีเริ่มต้นขึ้น: ค่า 90% จะบอกเบราว์เซอร์ให้เปลี่ยนสี #f5e944 เป็น 90% ของความยาวขององค์ประกอบ (เริ่มต้นที่ 20%) หลังจากนั้นการเปลี่ยนเป็นสีที่สามจะเริ่มขึ้นในพื้นที่ที่เหลือ - #00ffa2

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

คำนำหน้าผู้ขาย

เพื่อให้มั่นใจว่าสามารถใช้งานข้ามเบราว์เซอร์ได้ คุณสมบัติ CSS บางส่วนที่ล่าช้าจำเป็นต้องต่อท้ายด้วยคำนำหน้าผู้ขาย - คำนำหน้าพิเศษที่เพิ่มโดยนักพัฒนาเบราว์เซอร์:

• -webkit- - คำนำหน้าสำหรับ Chrome, Safari, Android;
• -moz- เป็นคำนำหน้าสำหรับ Firefox
• -o- เป็นคำนำหน้าสำหรับ Opera

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

ภาพพื้นหลัง: -webkit-linear-gradient (ซ้าย, ม่วง, แดง); ภาพพื้นหลัง: -moz-linear-gradient (ซ้าย, สีม่วง, สีแดง); ภาพพื้นหลัง: -o-linear-gradient (ซ้าย, สีม่วง, สีแดง); ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางซ้าย, สีม่วง, สีแดง);

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

รองรับอินเตอร์เน็ตเอ็กซ์พลอเรอร์

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

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

เพิ่มเติมในบทช่วยสอน:การทำซ้ำเชิงเส้นการไล่ระดับสี () - การไล่ระดับสีเชิงเส้นซ้ำ

• การแปล

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

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

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

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

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

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

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

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

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

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

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

มุมไล่ระดับ

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

ถ้าเป็นซี จุดศูนย์กลางสนามไล่ระดับสี จากนั้น 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) ดังนั้นอย่าคาดหวังอะไรมากจากเครื่องมือนี้

แท็ก:

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

เพิ่มแท็ก