home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS Gradient: สร้างไล่สี Linear และ Radial Gradient

Gradient คืออะไร?

การเปลี่ยนสีแบบต่อเนื่องระหว่าง 2 สีขึ้นไป ใช้ผ่าน Property background หรือ background-image

2 ประเภทหลัก

  1. Linear Gradient: ไล่สีตามเส้นตรง
  2. Radial Gradient: ไล่สีแฉออกจากจุดศูนย์กลาง

Linear Gradient

ไวยากรณ์

background: linear-gradient(direction, color1, color2, ...);

ทิศทาง (Direction)

  • Default: Top to Bottom
  • Keywords: to right, to left, to top right, to bottom left
  • Angle: 45deg, 120deg

ตัวอย่าง

/* Top to Bottom */
background: linear-gradient(#00C9FF, #92FE9D);

/* Left to Right */
background: linear-gradient(to right, #00C9FF, #92FE9D);

/* Diagonal */
background: linear-gradient(to top right, #00C9FF, #92FE9D);

/* 3 สี + Angle */
background: linear-gradient(120deg, #00D2FF, #00C9FF, #3A47D5);

Color Stops (ควบคุมตำแหน่งสี)

/* Hard Line ที่ 50% */
background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);

/* Percentage Stops */
background: linear-gradient(to right, #00D2FF 25%, #00C9FF 50%, #3A47D5 75%);

Transparent Gradient (ใช้ RGBA)

background: linear-gradient(to right, 
  rgba(0,201,255, 0.5),   /* 50% Transparent */
  rgba(146,254,157, 0.7)  /* 30% Transparent */
);

Radial Gradient

ไวยากรณ์

background: radial-gradient(shape size at position, color1, color2, ...);

ตัวอย่าง

/* Default: Ellipse, Center */
background: radial-gradient(#4B6CB7, #D9E7FF);

/* Circle Shape */
background: radial-gradient(circle, #4B6CB7, #D9E7FF);

/* Color Stops with Percentage */
background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);

/* Position: Farthest Corner at 50px 50px */
background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);

สรุป

CSS Gradient สร้างพื้นหลังสวยงามโดยไม่ต้องใช้รูปภาพ Linear Gradient ควบคุมได้ด้วย Direction/Angle/Stops, Radial Gradient ควบคุม Shape/Size/Position ทั้งคู่รองรับ Transparency ด้วย RGBA