กลับไปหน้า Design
ทริคDesign

Gradients

Gradient คือการไล่เฉดสี ใช้อย่างพอดีเพื่อเพิ่มมิติโดยไม่รบกวนการอ่านเนื้อหา

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

Gradients คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

ตอนคุณทำพื้นหลัง hero หรือการ์ดให้ดูมีมิติ

อ่านแล้วทำอะไรต่อ

ไล่จากสีแบรนด์เข้มไปอ่อนในมุมเฉียง ทำให้แถบหัวข้อดูมีมิติโดยตัวอักษรขาวยังอ่านชัด

เห็นภาพ: ทริคนี้เป็นยังไง

สีเดียว
background:
  #84BD00;
gradient
background:
  linear-gradient(135deg,
    #84BD00, #5E8A00);
สีเรียบ เทียบกับ gradient นุ่มๆ ด้วย CSS

ใช้ตอนไหน?

  • ตอนคุณทำพื้นหลัง hero หรือการ์ดให้ดูมีมิติ
  • ตอนคุณอยากเน้นปุ่มหรือแบนเนอร์เล็กน้อย
  • ตอนคุณทำพื้นหลังของหัวข้อหรือสไลด์

ความหมาย

gradient (ไล่เฉดสี) คือการเปลี่ยนสีจากสีหนึ่งไปอีกสีหนึ่งอย่างต่อเนื่อง ในงานเว็บใช้ผ่าน CSS เช่น linear-gradient (ไล่เป็นเส้นตรง) หรือ radial-gradient (ไล่เป็นวงกลม) ควรใช้สีที่ใกล้กันเพื่อให้ดูนุ่มไม่เป็นแถบ

เขียน gradient ด้วย CSS

เลือกสองสีที่ใกล้กันบนวงล้อสี แล้วกำหนดทิศทางการไล่

background: linear-gradient(135deg, #00843D, #006B30);
/* ไล่จากเขียวสดไปเขียวเข้ม มุม 135 องศา */

ตัวอย่างการใช้

พื้นหลังหัวข้อแบบนุ่ม

ไล่จากสีแบรนด์เข้มไปอ่อนในมุมเฉียง ทำให้แถบหัวข้อดูมีมิติโดยตัวอักษรขาวยังอ่านชัด