CSS Tips : การไล่ระดับสีด้วย CSS

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

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

CSS Tips : การไล่ระดับสีด้วย CSS

โพสต์โดย abdkode » 25/03/2019 5:17 pm

CSS ย่อมาจาก Cascading Style Sheet เป็นกลไกในการเพิ่มสไตล์หรือจัดรูปแบบการแสดงผลเอกสาร HTMLในหน้าเว็บต่างๆ หนึ่งในคุณสมบัติที่สำคัญของ CSS คือการไล่ระดับสี การไล่ระดับสีจะทำให้แสดงการเปลี่ยนภาพที่ราบรื่นระหว่างสองสีขึ้นไป

การไล่ระดับสีมีสองประเภท
gradients types.png
gradients types.png (6.01 KiB) เปิดดู 1251 ครั้ง

การไล่สีเชิงเส้น (Linear Gradients) : การไล่ระดับสีที่ราบรื่นทั้ง ขึ้น, ลง, ซ้าย, ขวาและแนวทแยงมุม ขั้นต่ำต้องสองสีขึ้นไปในการสร้างการไล่ระดับสีเชิงเส้น จุดเริ่มต้นและทิศทางเป็นสิ่งจำเป็นสำหรับการสร้างเอฟเฟกต์ของการไล่ระดับสี ส่วนรูปแบบการเขียน CSS ดังนี้

โค้ด: เลือกทั้งหมด

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

ตัวอย่างโค้ดการไล่ระดับสี จากบนลงล่าง ดังนี้

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Gradients</title>
      <style>
         #main {
            height: 200px;
            background-color: white;
            background-image: linear-gradient(#00d4ff, #090979);
         }
         .mindphp {
            text-align:center;
            font-size:40px;
            font-weight:bold;
            padding-top:80px;
            color:white;
         }
         .decs {
            font-size:17px;
            text-align:center;
            color:white;
         }
      </style>
   </head>
   <body>
      <div id="main">
         <div class = "mindphp">Mindphp</div>
         <div class = "decs">Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</div>
      </div>
   </body>
</html>               

ผลลัพธ์ที่ได้การไล่ระดับสี จากบนลงล่าง
Linear Gradients.jpg
Linear Gradients.jpg (16.98 KiB) เปิดดู 1251 ครั้ง


การไล่ระดับสีเรเดียลหรือรัศมี (Radial Gradients) : การไล่ระดับสีเรเดียลแตกต่างจากการไล่ระดับสีเชิงเส้น มันเริ่มต้นที่จุดเดียวและเล็ดลอดออกไปด้านนอก สีแรกจะเริ่มต้นที่ตำแหน่งกึ่งกลางขององค์ประกอบจากนั้นสีจางลงไปจนถึงสีสุดท้ายไปทางขอบขององค์ประกอบ จางหายไปในอัตราที่เท่ากันจนกว่าจะมีการระบุ ส่วนรูปแบบการเขียน CSS ดังนี้

โค้ด: เลือกทั้งหมด

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

ตัวอย่างโค้ดการไล่ระดับสีเรเดียล ดังนี้

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Gradients</title>
      <style>
         #main {
            height: 200px;
            background-color: white;
            background-image: radial-gradient(#00d4ff, #090979);
         }
         .mindphp {
            text-align:center;
            font-size:40px;
            font-weight:bold;
            padding-top:80px;
            color:white;
         }
         .decs {
            font-size:17px;
            text-align:center;
            color:white;
         }
      </style>
   </head>
   <body>
      <div id="main">
         <div class = "mindphp">Mindphp</div>
         <div class = "decs">Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</div>
      </div>
   </body>
</html>               

ผลลัพธ์ที่ได้การไล่ระดับสีแบบเรเดียล
Radial Gradients.jpg
Radial Gradients.jpg (16.83 KiB) เปิดดู 1251 ครั้ง

ทั้งหมดนี้เป็นแค่ตัวอย่างเบื้องต้นซึ่งได้กำหนดใช้สีเพียงสองสีเท่านั้น เราสามารถกำหนดสีได้หลายๆสีตามความสวยงานที่เราต้องการ สามารถปรับแต่งเพิ่มเติมได้ทั้งการไล่สีเชิงเส้น ที่สามารถกำหนดทิศทางได้ และ การไล่ระดับสีแบบเรเดียลหรือรัศมีที่สามารถกำหนดองศาตามที่ต้องการได้ครับ หรือจะนำ javascriptความน่าสนใจเพิ่มขึ้นได้เช่นให้มีความเคลื่นไหวของสีเป็นต้น


ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

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

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

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

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