การไล่ระดับสี: เชิงเส้นและแนวรัศมี
สร้างการเปลี่ยนผ่านสีอย่างนุ่มนวลด้วย linear-gradient() และ radial-gradient()
การไล่ระดับสี: เชิงเส้นและแนวรัศมี เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
การไล่ระดับสี CSS คืออะไร
การไล่ระดับสี CSS คือ ภาพที่สร้างขึ้นโดยโปรแกรม ซึ่งไม่จำเป็นต้องใช้ไฟล์ภาพ และจะเปลี่ยนผ่านระหว่างสีอย่างน้อยสองสี โดยกำหนดเป็นค่าของ background-image หรือคุณสมบัติ background แบบย่อ
พื้นฐานการไล่ระดับสีเชิงเส้น
การไล่ระดับสีเชิงเส้นจะเปลี่ยนสีไปตามเส้นตรง อาร์กิวเมนต์ตัวแรกกำหนดทิศทาง ตามด้วยจุดหยุดสี
<div class="gradient-demo"></div>
ทิศทางการไล่ระดับสี: คีย์เวิร์ดและมุม
ทิศทางสามารถกำหนดด้วยคีย์เวิร์ดหรือมุมหน่วยองศา:
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
จุดหยุดสีหลายจุด
เพิ่มจุดหยุดสีได้มากเท่าที่ต้องการ แต่ละจุดสามารถระบุตำแหน่งเพิ่มเติมได้ โดยใช้ค่าความยาวหรือค่าร้อยละ
<div class="stops"></div>
จุดหยุดสีแบบฉับพลัน
กำหนดจุดหยุดสีสองจุดให้อยู่ที่ตำแหน่งเดียวกัน เพื่อสร้าง จุดหยุดสีแบบฉับพลัน ซึ่งทำให้สีเปลี่ยนทันทีโดยไม่มีการผสม
<div class="hard-stop"></div>
การไล่ระดับสีเชิงเส้นแบบทำซ้ำ
repeating-linear-gradient() เรียงรูปแบบการไล่ระดับสีซ้ำเพื่อสร้างแถบและพื้นผิว
<div class="stripes"></div>
พื้นฐานการไล่ระดับสีแบบรัศมี
การไล่ระดับสีแบบรัศมีจะแผ่สีออกจากจุดศูนย์กลางเป็นรูปร่างวงรีหรือวงกลม
<div class="radial-demo"></div>
รูปร่างและขนาดของการไล่ระดับสีแบบรัศมี
ควบคุมรูปร่างของการไล่ระดับสี (circle หรือ ellipse) และคีย์เวิร์ดที่กำหนดขอบเขตของการไล่ระดับสี:
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
ตำแหน่งการไล่ระดับสีแบบรัศมี
ใช้ at <position> หลังรูปร่างหรือขนาด เพื่อย้ายจุดศูนย์กลางของการไล่ระดับสีแบบรัศมี
<div class="radial-position"></div>
การไล่ระดับสีแบบกรวย
conic-gradient() กวาดสีไปรอบจุดศูนย์กลางในลักษณะคล้ายแผนภูมิวงกลม โดยต้องระบุมุมเริ่มต้นด้วย from และอาจระบุตำแหน่งด้วย at ได้
<div class="conic-demo"></div>
ความโปร่งใสของการไล่ระดับสี
ใช้ transparent หรือ rgba() ในจุดหยุดสีของการไล่ระดับสี เพื่อให้สีค่อย ๆ ปรากฏหรือจางลงอย่างต่อเนื่องจากสีพื้นหลังขององค์ประกอบ
<div class="fade-overlay"></div>
ตรวจสอบความเข้าใจ
ฟังก์ชัน CSS ใดสร้างการไล่ระดับสีที่แผ่ออกจากจุดศูนย์กลาง
สรุป
การไล่ระดับสีเชิงเส้นดำเนินไปตามเส้น การไล่ระดับสีแบบรัศมีจะแผ่ออกด้านนอก และการไล่ระดับสีแบบกรวยจะกวาดไปรอบจุดหนึ่ง ให้ใช้จุดหยุดสีแบบฉับพลันเพื่อสร้างแถบ ฟังก์ชันการไล่ระดับสีทั้งหมดเป็นค่าของ background-image และสร้างภาพได้โดยไม่ต้องใช้ไฟล์ภายนอก
คำถามที่พบบ่อย
บทเรียน “การไล่ระดับสี: เชิงเส้นและแนวรัศมี” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การไล่ระดับสี: เชิงเส้นและแนวรัศมี” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การไล่ระดับสี: เชิงเส้นและแนวรัศมี”
สร้างการเปลี่ยนผ่านสีอย่างนุ่มนวลด้วย linear-gradient() และ radial-gradient() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การไล่ระดับสี: เชิงเส้นและแนวรัศมี” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ค่าสี: ชื่อ รหัสฐานสิบหก RGB และ HSL
- สีพื้นหลังและรูปภาพ
- การไล่ระดับสี: เชิงเส้นและแนวรัศมี
- ความทึบและความโปร่งใสแบบ RGBA