home

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

CSS3 Transparency และ Gradients (โปร่งใสและไล่สี)

Linear Gradient กับ Transparency: สร้างไล่สีโปร่งใสด้วย RGBA

ใช้ linear-gradient() กำหนด color stops เป็น rgba(r, g, b, alpha) โดย alpha = 0 (โปร่งใส) ถึง 1 (ทึบ) สร้างเอฟเฟกต์ fade out

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .linearGradient {
      height: 200px;
      background-image: linear-gradient(
        to left,
        rgb(111, 0, 255),
        rgba(111, 0, 255, 0.616),
        rgba(111, 0, 255, 0.384),
        rgba(111, 0, 255, 0)
      );
    }
  </style>
</head>
<body>
  <h1>Linear Gradient with Transparency</h1>
  <div class="linearGradient"></div>
  <h2>Gradient ไปจากสีม่วงเข้ม → โปร่งใส</h2>
</body>
</html>

Gradient Syntax

linear-gradient(direction, color-stop1, color-stop2, ...)
/* Direction */
to right / to left / to top / to bottom
to top right / 45deg / 1.5rad
/* Color stop with position */
rgba(255,0,0,0.5) 20%

ประเภท Gradient

  • linear-gradient() – ไล่สีตรง
  • radial-gradient() – ไล่สีวงกลม/ไข่จากจุดศูนย์กลาง
  • conic-gradient() – ไล่สีวนรอบจุดศูนย์กลาง (pie chart, color wheel)
  • repeating-*-gradient() – ไล่สีซ้ำ (stripes, patterns)

Browser Support

รองรับทุก browser สมัยใหม่ (IE 10+ ต้อง prefix -ms- ไม่ต้อง prefix ตอนนี้)

เครื่องมือช่วย