โดย Parichat » 09/01/2018 3:40 pm
Gradients คือ การไล่ระดับสี
CSS ช่วยให้คุณสามารถแสดงช่วงการเปลี่ยนภาพได้อย่างสวยงามระหว่างสีที่ระบุตั้งแต่สองสีขึ้นไป ในการไล่ระดับสีสามารถแบ่งได้ 2 แบบด้วยกันคือ
- ในการสร้างการไล่ระดับสีแบบเส้นตรงนั้นเราต้องกำหนดช่วงสีอย่างน้อยสองสี หยุดสีคือสีที่คุณต้องการทำให้เกิดการเปลี่ยนภาพที่ราบรื่น นอกจากนี้คุณยังสามารถตั้งค่าจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมกับผลการไล่ระดับสี
Syntax:
โค้ด: เลือกทั้งหมด
background: linear-gradient(direction, color-stop1, color-stop2, ...);
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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>
ผลลัพธ์
- การไล่ระดับสีแบบรัศมีวงกลมถูกกำหนดโดยศูนย์กลางในการสร้างการไล่ระดับสีแบบรัศมีวงกลมเราต้องกำหนดลำดับสีอย่างน้อยสองสี
Syntax:
โค้ด: เลือกทั้งหมด
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>
ผลลัพธ์
- 5.JPG (20.71 KiB) Viewed 1127 times
- 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>
ผลลัพธ์
- 4.JPG (21.08 KiB) Viewed 1127 times
อ้างอิง:
https://www.w3schools.com/css/css3_gradients.asp
[b]Gradients [/b] คือ การไล่ระดับสี [url=https://www.mindphp.com/forums/viewforum.php?f=73]CSS[/url] ช่วยให้คุณสามารถแสดงช่วงการเปลี่ยนภาพได้อย่างสวยงามระหว่างสีที่ระบุตั้งแต่สองสีขึ้นไป ในการไล่ระดับสีสามารถแบ่งได้ 2 แบบด้วยกันคือ
[list]1.Linear Gradients[/list]
[list]ในการสร้างการไล่ระดับสีแบบเส้นตรงนั้นเราต้องกำหนดช่วงสีอย่างน้อยสองสี หยุดสีคือสีที่คุณต้องการทำให้เกิดการเปลี่ยนภาพที่ราบรื่น นอกจากนี้คุณยังสามารถตั้งค่าจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมกับผลการไล่ระดับสี
[b]Syntax:[/b]
[code]background: linear-gradient(direction, color-stop1, color-stop2, ...);[/code][/list]
[list][b][color=#FF40BF]1.1.Top to Bottom[/color][/b][/list]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>[/code]
[b]ผลลัพธ์[/b]
[attachment=4]1.JPG[/attachment]
[list][b][color=#FF40BF]1.2.Left to Right[/color][/b][/list]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>[/code]
[b][color=#FF0040]ผลลัพธ์[/color][/b]
[attachment=3]2.JPG[/attachment]
[list][b][color=#FF40BF]1.3. Diagonal[/color][/b][/list]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>
[/code]
[b][color=#FF0040]ผลลัพธ์[/color][/b]
[attachment=2]3.JPG[/attachment]
[list][color=#FF40BF]2.Radial Gradients[/color][/list]
[list]การไล่ระดับสีแบบรัศมีวงกลมถูกกำหนดโดยศูนย์กลางในการสร้างการไล่ระดับสีแบบรัศมีวงกลมเราต้องกำหนดลำดับสีอย่างน้อยสองสี[/list]
[b]Syntax:[/b]
[code]background: radial-gradient(shape size at position, start-color, ..., last-color);[/code]
[list][b][color=#FF40BF]2.1.Evenly Spaced Color Stops (this is default)[/color][/b][/list]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>[/code]
ผลลัพธ์
[attachment=1]4.JPG[/attachment]
[list][b][color=#FF40BF]2.2.Differently Spaced Color Stops[/color][/b][/list]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>[/code]
ผลลัพธ์
[attachment=0]5.JPG[/attachment]
อ้างอิง: [url]https://www.w3schools.com/css/css3_gradients.asp[/url]