การทำสี Background ในแบบ Gradient ด้วย CSS [Article ID : 226]

เรื่อง : วิธีทำสีพื้นหลังแบบ Gradient ด้วย CSS (Gradient Background Color)

ความรู้พื้นฐานที่ต้องใช้
- การสร้าง CSS Selector ด้วย Dreamweaver

วิธีการกำหนดโทนสีแบบ Gradient ด้วยโปรแกรม Dreamweaver CC

การกำหนดโทนสีในแบบเกรเดียนต์สามารถทำได้ในโปรแกรม Dreamweaver CC โดยขั้นตอนการใช้โปรแกรม Dreamweaver เพื่อกำหนดสี Background ในแบบ Gradient หรือแบบไล่โทนสีนั้น สามารถกระทำได้ ดังนี้

1. ที่หน้าต่าง CSS Designer ของโปรแกรม ให้ทำการสร้าง Selectors ที่ต้องการ
2. จากนั้นเลือกในส่วนของการกำหนดคุณสมบัติ Background ดังรูป จากรูปเป็นการกำหนดคุณสมบัติให้แก่ #g-color

3. เมื่อเลือกดังข้อ 2 แล้ว จะพบว่ามี Icon สำหรับกำหนด gradient ดังรูป *ให้เราคลิกเลือกที่ไอคอน gradient

4. โปรแกรมจะทำการเปิดหน้าต่างให้กำหนดค่าที่ที่ต้องการ ให้ทำการเลือกโทนสีจากหน้าต่างนี้ ดังรูป
5. เมื่อเลือกโทนสีได้ตามต้องการแล้ว ให้ทำการคลิกไปที่พื้นที่อื่นบนหน้าต่าง CSS Designer จะทำให้โปรแกรม Dreamweaver นำโทนทีสีเลือกไว้ไปกำหนดค่า ดังรูป 6. เมื่อกำหนดคุณสมบัติโทนสีในแบบ Gradient ได้แล้ว ก็สามารถนำ CSS นี้ไปใช้งานได้ต่อไป

โค้ด CSS ที่ทำให้สีพื้นเป็นแบบ Gradient

สำหรับใน Dreamweaver เวอร์ชั่นตระกูล CS เช่น CS5, CS6 ลองศึกษาหรือ Copy โค้ดของ CSS นำไปศึกษาหรือใช้งาน ดังนี้

<style type="text/css">
#g-color {
	background: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(17,117,189,1.00)),color-stop( 100% , rgba(255,255,255,1.00)));
	background: -webkit-linear-gradient(270deg,rgba(17,117,189,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background: linear-gradient(180deg,rgba(17,117,189,1.00) 0%,rgba(255,255,255,1.00) 100%);
       width: 400px;
	height: 200px;
}
</style>

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 3

เมื่อเราได้ทำการกำหนดรูปแบบการแสดงผลของหน้าตา Guestbook ของเราแล้ว ต่อมาเราจะทำการเรียกข้อมูลจากฐานข้อมูลขึ้นมาแสดงกับหน้าตาแสดงผลท...  

วิธีการสร้างกรอบข้อความด้วย CSS (CSS Border)

เรื่อง : การใช้ CSS เพื่อสร้างกรอบข้อความ (CSS Border) เส้นกรอบ หรือ Border ที่จะพูดถึงในบทความนี้ คือ...  

สร้างโปรแกรมอ่าน RSS ด้วย Dreamweaver ตอนที่ 2

เรื่อง : สร้างโปรแกรมอ่าน RSS/XML ด้วย Dreamweaver ตอนที่ 2 หลังจากในตอนที่ 1 ของบทความได้แนะนำกล่าวถึงการกำหนดค่าต่าง ๆ เพ...  

ห้าม Click ขวาหน้าเว็บ โดยไม่ใช้ Extension

เรื่อง :: ห้าม Click ขวาหน้าเว็บ โดยไม่ใช้ Extensionมีผู้ติดต่อสอบถามกันเข้ามามากเลยว่า...ไม่สามารถหาตัว Extension ที่ชื่อ...