การใช้งาน Gradients ใน CSS

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

Parichat
PHP VIP Members
PHP VIP Members
Posts: 4860
Joined: 08/01/2018 10:03 am

การใช้งาน Gradients ใน CSS

Post by Parichat » 09/01/2018 3:40 pm

Gradients คือ การไล่ระดับสี CSS ช่วยให้คุณสามารถแสดงช่วงการเปลี่ยนภาพได้อย่างสวยงามระหว่างสีที่ระบุตั้งแต่สองสีขึ้นไป ในการไล่ระดับสีสามารถแบ่งได้ 2 แบบด้วยกันคือ
  • 1.Linear Gradients
  • ในการสร้างการไล่ระดับสีแบบเส้นตรงนั้นเราต้องกำหนดช่วงสีอย่างน้อยสองสี หยุดสีคือสีที่คุณต้องการทำให้เกิดการเปลี่ยนภาพที่ราบรื่น นอกจากนี้คุณยังสามารถตั้งค่าจุดเริ่มต้นและทิศทาง (หรือมุม) พร้อมกับผลการไล่ระดับสี
    Syntax:

    Code: Select all

    background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • 1.1.Top to Bottom
ตัวอย่าง

Code: Select all

<!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.JPG
  • 1.2.Left to Right
ตัวอย่าง

Code: Select all

<!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>
ผลลัพธ์
2.JPG
  • 1.3. Diagonal
ตัวอย่าง

Code: Select all

<!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>
ผลลัพธ์
3.JPG
  • 2.Radial Gradients
  • การไล่ระดับสีแบบรัศมีวงกลมถูกกำหนดโดยศูนย์กลางในการสร้างการไล่ระดับสีแบบรัศมีวงกลมเราต้องกำหนดลำดับสีอย่างน้อยสองสี
Syntax:

Code: Select all

background: radial-gradient(shape size at position, start-color, ..., last-color);
  • 2.1.Evenly Spaced Color Stops (this is default)
ตัวอย่าง

Code: Select all

<!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>
ผลลัพธ์
4.JPG
4.JPG (21.08 KiB) Viewed 527 times
  • 2.2.Differently Spaced Color Stops
ตัวอย่าง

Code: Select all

<!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>
ผลลัพธ์
5.JPG
5.JPG (20.71 KiB) Viewed 527 times
อ้างอิง: https://www.w3schools.com/css/css3_gradients.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: Google [Bot] and 7 guests