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

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

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

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

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

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

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

การไล่ระดับสีมีสองประเภท
gradients types.png
gradients types.png (6.01 KiB) Viewed 3578 times
การไล่สีเชิงเส้น (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) Viewed 3578 times
การไล่ระดับสีเรเดียลหรือรัศมี (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) Viewed 3578 times
ทั้งหมดนี้เป็นแค่ตัวอย่างเบื้องต้นซึ่งได้กำหนดใช้สีเพียงสองสีเท่านั้น เราสามารถกำหนดสีได้หลายๆสีตามความสวยงานที่เราต้องการ สามารถปรับแต่งเพิ่มเติมได้ทั้งการไล่สีเชิงเส้น ที่สามารถกำหนดทิศทางได้ และ การไล่ระดับสีแบบเรเดียลหรือรัศมีที่สามารถกำหนดองศาตามที่ต้องการได้ครับ หรือจะนำ javascriptความน่าสนใจเพิ่มขึ้นได้เช่นให้มีความเคลื่นไหวของสีเป็นต้น


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

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 68