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

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

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

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1566
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์โดย Parichat » 09/01/2018 3:40 pm

Gradients คือ การไล่ระดับสี CSS ช่วยให้คุณสามารถแสดงช่วงการเปลี่ยนภาพได้อย่างสวยงามระหว่างสีที่ระบุตั้งแต่สองสีขึ้นไป ในการไล่ระดับสีสามารถแบ่งได้ 2 แบบด้วยกันคือ
    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.JPG


    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>

ผลลัพธ์
2.JPG

    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>

ผลลัพธ์
3.JPG


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

ผลลัพธ์
4.JPG
4.JPG (21.08 KiB) เปิดดู 142 ครั้ง

    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>

ผลลัพธ์
5.JPG
5.JPG (20.71 KiB) เปิดดู 142 ครั้ง


อ้างอิง: https://www.w3schools.com/css/css3_gradients.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน