สร้าง CSS gradient

ทำงานอย่างไร

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

ธรรมเนียมเรื่องมุมทำให้คนพลาด

ใน CSS 0 องศาชี้ขึ้นและมุมเพิ่มขึ้นตามเข็มนาฬิกา ดังนั้น 90 องศาไปจากซ้ายไปขวา และ 180 องศาไปจากบนลงล่าง ซึ่งต่างจากธรรมเนียมทางคณิตศาสตร์และเครื่องมือออกแบบหลายตัว จึงเป็นเหตุผลที่การไล่เฉดสีที่คัดลอกมาจากที่อื่นมักออกมาหมุนไปจากเดิม

สามชนิด

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

การไล่เฉดสีคือภาพ ไม่ใช่สี

นี่เป็นอีกเรื่องที่ทำให้คนสะดุด CSS มองการไล่เฉดสีเป็นภาพพื้นหลัง จึงใช้ได้ใน background และ background-image แต่ใช้ใน color, border-color หรืออะไรก็ตามที่คาดหวังสีธรรมดาไม่ได้ การไล่เฉดสีของข้อความต้องใช้ background-clip ซึ่งเป็นเทคนิคแยกต่างหาก

การเพิ่มสีกลาง

สองจุดหยุดให้การผสมที่สะอาด จุดที่สามให้คุณพาการเปลี่ยนผ่านไปผ่านอีกเฉดหนึ่ง ซึ่งหลีกเลี่ยงสีเทาขุ่นที่ปรากฏเมื่อสองสีตรงข้ามผสมกันโดยตรง