การไล่ระดับสีมีสองประเภท การไล่สีเชิงเส้น (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>
โค้ด: เลือกทั้งหมด
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>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP