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

สารบัญ

พื้นหลังไล่ระดับสี:

Gradient Backgrounds

การไล่ระดับสี CSS ช่วยให้คุณแสดงการเปลี่ยนสีที่ราบรื่นระหว่างสีที่ระบุตั้งแต่สองสีขึ้นไป

CSS กำหนดประเภทของการไล่ระดับสีสามประเภท:

การไล่ระดับสีเชิงเส้น (ลง/ขึ้น/ซ้าย/ขวา/แนวทแยง)
การไล่ระดับสีแบบรัศมี (กำหนดโดยจุดศูนย์กลาง)
การไล่ระดับสีทรงกรวย (หมุนรอบจุดศูนย์กลาง)

การไล่ระดับสีเชิงเส้น CSS

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

ไวยากรณ์

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

ทิศทาง - จากบนลงล่าง (นี่คือค่าเริ่มต้น)

ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มต้นจากด้านบน เริ่มเป็นสีแดง เปลี่ยนเป็นสีเหลือง:

top to bottom (default)

ตัวอย่าง

  #grad {
  background-image: linear-gradient(red, yellow);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

ทิศทาง - จากซ้ายไปขวา

ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มจากด้านซ้าย มันเริ่มเป็นสีแดง เปลี่ยนเป็น สีเหลือง:

left to right

ตัวอย่าง

  #grad {
  background-image: linear-gradient(to right, red , yellow);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>

ทิศทาง - เส้นทแยงมุม

คุณสามารถทำการไล่ระดับสีในแนวทแยงได้โดยการระบุตำแหน่งเริ่มต้นทั้งแนวนอนและแนวตั้ง

ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มต้นที่ด้านซ้ายบน (และไปที่ด้านขวาล่าง) เริ่มเป็นสีแดง เปลี่ยนเป็นสีเหลือง:

top left to bottom right

ตัวอย่าง

   #grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>

การใช้มุม

หากคุณต้องการควบคุมทิศทางของการไล่ระดับสีได้มากขึ้น คุณสามารถกำหนดมุมได้ แทนที่จะกำหนดทิศทางที่กำหนดไว้ล่วงหน้า (ไปด้านล่าง ถึง บน ขวา ซ้าย ล่างขวา ฯลฯ) ค่า 0deg เทียบเท่ากับ "ไปด้านบน" ค่า 90deg เท่ากับ "ไปทางขวา" ค่าของ 180 องศา เท่ากับ "ไปด้านล่าง"

ไวยากรณ์

background-image: linear-gradient(angle, color-stop1, color-stop2);

ตัวอย่างต่อไปนี้แสดงวิธีใช้มุมในการไล่ระดับสีเชิงเส้น:

180deg

ตัวอย่าง

  #grad {
  background-image: linear-gradient(180deg, red, yellow);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

การใช้การหยุดหลายสี

ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้น (จากบนลงล่าง) ด้วย หยุดหลายสี:

ตัวอย่าง

  #grad {
  background-image: linear-gradient(red, yellow, green);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

ตัวอย่างต่อไปนี้แสดงวิธีสร้างการไล่ระดับสีเชิงเส้น (จากซ้ายไปขวา) ด้วยสีรุ้งและข้อความบางส่วน:

Rainbow Background

ตัวอย่าง

   #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

การใช้ความโปร่งใส

การไล่ระดับสี CSS ยังรองรับความโปร่งใส ซึ่งสามารถใช้เพื่อสร้างเอฟเฟกต์สีซีดจางได้

เพื่อเพิ่มความโปร่งใส เราใช้ฟังก์ชัน rgba() เพื่อกำหนดการหยุดสี พารามิเตอร์ตัวสุดท้ายในฟังก์ชัน rgba() สามารถเป็นค่าได้ตั้งแต่ 0 ถึง 1 และค่าดังกล่าว กำหนดความโปร่งใสของสี: 0 หมายถึงความโปร่งใสทั้งหมด 1 ระบุสีเต็ม (ไม่มีความโปร่งใส)

ตัวอย่างต่อไปนี้แสดงการไล่ระดับสีเชิงเส้นที่เริ่มจากด้านซ้าย เริ่มโปร่งใสโดยสมบูรณ์ และเปลี่ยนเป็นสีแดงเต็มรูปแบบ:

ตัวอย่าง

  #grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), 
rgba(255,0,0,1));
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

การทำซ้ำการไล่ระดับสีเชิงเส้น

ฟังก์ชัน Repeating-linear-gradient() ใช้เพื่อทำซ้ำการไล่ระดับสีเชิงเส้น:

ตัวอย่าง

การไล่ระดับสีเชิงเส้นซ้ำ:

   #grad {
  background-image: 
repeating-linear-gradient(red, yellow 10%, green 20%);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>