ทำความเข้าใจกับการไล่ระดับสีเชิงเส้น CSS3

การสร้างภาพเพียงเพื่อแสดงการไล่ระดับสีนั้นไม่ยืดหยุ่นและอาจกลายเป็นแนวทางปฏิบัติที่ไม่ดีได้อย่างรวดเร็ว แต่น่าเสียดายที่ในขณะที่เขียนบทความนี้ มันอาจจะยังต้องเป็นเช่นนั้น แต่หวังว่าจะไม่นานกว่านี้อีกแล้ว ต้องขอบคุณ Firefox และ Safari/Chrome ที่ทำให้เราทำการไล่ระดับสีอันทรงพลังได้โดยใช้ความพยายามเพียงเล็กน้อย ในบทความนี้ เราจะแสดงการใช้งานการไล่ระดับสี CSS อย่างง่าย และคุณสมบัตินี้แตกต่างอย่างไรในเบราว์เซอร์ Mozilla และ webkit

PS: ข้อความต้นฉบับของบทความนี้มีวิดีโอ แต่เนื่องจากเหตุผลที่ทราบกันดี เราไม่สามารถดูวิดีโอนี้บน Youtube ได้ นักเรียนที่ต้องการดูวิดีโอนี้ โปรดหาวิธีรับชมด้วยตนเอง (สูงสุด 720P): http ://www.youtube.com/watch?v=9D2hyM5SSCE

เว็บคิท

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

/* ไวยากรณ์ นำมาจาก: http://webkit.org/blog/175/introcing-css-gradients/ */
-webkit-gradient(<ประเภท>, <จุด> [, <รัศมี>]?, <จุด> [, <รัศมี>]? [, <หยุด>]*)

/* ในทางปฏิบัติ... */
พื้นหลัง: -webkit-gradient (เชิงเส้น, 0 0, 0 100%, จาก (สีแดง), ถึง (สีน้ำเงิน));