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

พอดแคสต์ CSS - 021: การไล่ระดับสี

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

พื้นหลังไล่ระดับสีเข้มถึงสีม่วงอ่อน พร้อมส่วนหัว ย่อหน้า และลิงก์

ในตอนแรกคุณอาจคิดว่าจะต้องส่งออกรูปภาพจากเครื่องมือออกแบบ แต่คุณใช้ linear-gradient แทนได้

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

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

การสนับสนุนเบราว์เซอร์

  • 26
  • 12
  • 16
  • 7

แหล่งที่มา

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

.my-element {
    background: linear-gradient(black, white);
}

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

.my-element {
    background: linear-gradient(to right, black, white);
}

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

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

คุณสามารถเพิ่มสีและการหยุดสีได้มากเท่าที่ต้องการใน linear-gradient() และสามารถเพิ่มการไล่ระดับสีซ้อนทับกันโดยคั่นการไล่ระดับสีแต่ละรายการด้วยเครื่องหมายจุลภาค

การไล่ระดับสีแบบรัศมี

การสนับสนุนเบราว์เซอร์

  • 26
  • 12
  • 16
  • 7

แหล่งที่มา

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

.my-element {
    background: radial-gradient(white, black);
}

ตำแหน่งการไล่ระดับสีจะคล้ายกับ background-position โดยใช้คีย์เวิร์ดและ/หรือค่าตัวเลข ขนาดของการไล่ระดับสีแบบรัศมีเป็นตัวกำหนดขนาดของรูปร่างสิ้นสุดการไล่ระดับสี (วงกลมหรือวงรี) และโดยค่าเริ่มต้นจะเป็น farthest-corner ซึ่งหมายความว่ามุมที่อยู่ไกลที่สุดของช่องจากจุดกึ่งกลาง และคุณสามารถใช้คีย์เวิร์ดต่อไปนี้

  • closest-corner จะบรรจบกับมุมที่ใกล้กับจุดกึ่งกลางของการไล่ระดับสีมากที่สุด
  • closest-side จะตรงกับด้านข้างของช่องที่ใกล้กับกึ่งกลางของการไล่ระดับสีมากที่สุด
  • farthest-side จะทำงานตรงกันข้ามกับ closest-side

คุณสามารถเพิ่มจุดสีได้มากเท่าที่ต้องการ เช่นเดียวกับ linear-gradient ในทำนองเดียวกัน คุณสามารถเพิ่ม radial-gradients ได้มากเท่าที่ต้องการ

การไล่ระดับสีกรวย

การสนับสนุนเบราว์เซอร์

  • 69
  • 79
  • 83
  • 12.1

แหล่งที่มา

การไล่ระดับสีรูปกรวยมีจุดศูนย์กลางในช่องโดยเริ่มจากด้านบน (โดยค่าเริ่มต้น) และหมุนไปรอบๆ เป็นวงกลม 360 องศา

.my-element {
    background: conic-gradient(white, black);
}

ฟังก์ชัน conic-gradient() จะยอมรับอาร์กิวเมนต์ตำแหน่งและมุม

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

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

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

การทำซ้ำและการผสม

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

หากการไล่ระดับสีไม่แสดงซ้ำ คุณอาจยังไม่ได้กำหนดความยาวสำหรับการหยุดสีแบบใดแบบหนึ่ง ตัวอย่างเช่น คุณสร้างพื้นหลังที่เป็นลายเส้นได้ด้วย repeating-linear-gradient โดยการตั้งค่าระยะเวลาการหยุดสี

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

คุณยังสามารถผสมฟังก์ชันการไล่ระดับสีในพร็อพเพอร์ตี้ background ได้ด้วย รวมถึงกำหนดการไล่ระดับสีได้มากเท่าที่ต้องการ เช่นเดียวกับที่ทำกับภาพพื้นหลัง เช่น คุณสามารถผสมการไล่ระดับสีแบบเส้นตรงหลายรายการเข้าด้วยกัน หรือผสมการไล่ระดับสีแบบเส้นตรง 2 แบบด้วยการไล่ระดับสีแบบรัศมี

แหล่งข้อมูล

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับการไล่ระดับสี

จำนวนสีขั้นต่ำที่ต้องใช้เพื่อสร้างการไล่ระดับสีคือเท่าใด

1
ลองอีกครั้งนะ
2
โฆษณาเหล่านี้อาจมีสีเดียวกันและปรากฏเป็นสีทึบ แต่ใช่ จะต้องมีสีอย่างน้อย 2 สี
3
ลองอีกครั้งนะ
4
ลองอีกครั้งนะ

องค์ประกอบมีการไล่ระดับสีหลายสีเป็นพื้นหลังได้ไหม

จริง
พร็อพเพอร์ตี้ background-image อนุญาตการไล่ระดับสีหลายแบบ เพียงคั่นแต่ละค่าด้วยคอมมา
ไม่จริง
แต่ก็ทำได้นะ