- 1.Linear Gradients
- ในการสร้างการไล่ระดับสีแบบเส้นตรงนั้นเราต้องกำหนดช่วงสีอย่างน้อยสองสี หยุดสีคือสีที่คุณต้องการทำให้เกิดการเปลี่ยนภาพที่ราบรื่น นอกจากนี้คุณยังสามารถตั้งค่าจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมกับผลการไล่ระดับสี
Syntax:โค้ด: เลือกทั้งหมด
background: linear-gradient(direction, color-stop1, color-stop2, ...);
- 1.1.Top to Bottom
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: #00ffff; /* For browsers that do not support gradients */
background: linear-gradient(#00ffff, #ff99cc); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>ทดสอบการใช้งาน Linear Gradient - Top to Bottom</h1>
<p>ผลลัพธ์ที่ได้ดังรูปที่แสดงด้านล่าง</p>
<div id="grad1"></div>
</body>
</html>
- 1.2.Left to Right
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: #00ffff; /* For browsers that do not support gradients */
background: linear-gradient(to right, #00ffff , #ff99cc); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>ทดสอบการใช้งาน Linear Gradient - Left to Right</h1>
<p>ผลลัพธ์ที่ได้ดังรูปที่แสดงด้านล่าง</p>
<div id="grad1"></div>
</body>
</html>
- 1.3. Diagonal
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: #00ffff; /* For browsers that do not support gradients */
background: linear-gradient(to bottom right, #00ffff, #ff99cc); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>ทดสอบการใช้งาน Linear Gradient - Diagonal</h1>
<p>ผลลัพธ์ที่ได้ดังรูปที่แสดงด้านล่าง</p>
<div id="grad1"></div>
</body>
</html>
- 2.Radial Gradients
- การไล่ระดับสีแบบรัศมีวงกลมถูกกำหนดโดยศูนย์กลางในการสร้างการไล่ระดับสีแบบรัศมีวงกลมเราต้องกำหนดลำดับสีอย่างน้อยสองสี
โค้ด: เลือกทั้งหมด
background: radial-gradient(shape size at position, start-color, ..., last-color);
- 2.1.Evenly Spaced Color Stops (this is default)
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: #00ffff; /* For browsers that do not support gradients */
background: radial-gradient(#00ffff, #ff99cc, #ccff33); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>ทดสอบการใช้งาน Radial Gradient</h1>
<p>ผลลัพธ์ที่ได้ดังรูปที่แสดงด้านล่าง</p>
<div id="grad1"></div>
</body>
</html>
- 2.2.Differently Spaced Color Stops
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: red; /* For browsers that do not support gradients */
background: radial-gradient(#00ffff 5%, #ff99cc 15%, #ccff33 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>ทดสอบการใช้งาน Radial Gradient</h1>
<p>ผลลัพธ์ที่ได้ดังรูปที่แสดงด้านล่าง</p>
<div id="grad1"></div>
</body>
</html>