About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

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


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

CSS3 มีค่าของ Background Properties ที่สามารถกำหนดสีในแบบไล่โทนสี หรือที่เรียกกันว่า Gradient (เกรเดียนต์) ได้ ซึ่งทำให้นักพัฒนา หรือนักออกแบบเว็บไม่ต้องเสียเวลาไปทำการไล่โทนสีโดยใช้ Images แล้วค่อยนำมาใช้กับเว็บ เหมือนที่เคยใช้กันมาในอดีต
สำหรับโปรแกรม Dreamweaver เวอร์ชั่น CC มีฟีเจอร์ในการกำหนดคุณสมบัติของ CSS ในส่วนนี้ให้ผู้ใช้งานโปรแกรมกำหนดสีในแบบ Gradient ได้โดยง่าย จะเป็นอย่างไรลองอ่านบทความนี้กันครับ...

Gradient Color by CSS

DwThai.Com

ความรู้พื้นฐานที่ต้องใช้
- การสร้าง 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 ต่าง ๆ เพิ่มเติมด้วยตนเอง เช่น ค่า Width and Height เป็นต้น
*สำหรับท่านที่ไม่คุ้นเคยกับ CSS ใน Dreamweaver CC ท่านสามารถอ่านบทความต่าง ๆ เหล่านี้เพิ่มเติม

Request for MySQLi Database Connector

โค้ด 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

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



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

การแก้ไขปัญหาการใช้งาน Layer กับ Flash File

เรื่อง : การแก้ไขปัญหาการใช้งาน Layer กับ Flash File หลายท่านอาจจะมีปัญหาเรื่องของ Layer หรือ PopUp-MENU ที่เมื่อนำเอาไปว...  

เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น

เรื่อง : เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น ในการออกแบบเว็บเพจ บางครั้งเราจำเป็นต้อง...  

การ Set ให้โปรแกรม Dreamweaver ใช้งานภาษาไทย

เรื่อง : การกำหนด Encoding ให้เว็บเพจเพื่อการใช้งานภาษาไทยได้อย่างถูกต้อง *เวอร์ชั่นตั้งแต่ CS3 ขึ้นไปไม่จำเป็นต้องเซ็ท เพราะค่า Defaul...  

เปิดหน้าต่าง Code เพื่อแก้ไขโค้ดได้อย่างรวดเร็ว

เรื่อง : เปิดหน้าต่างเพื่อแก้ไข Source Code เว็บเพจ (Code Inspector) ทุกครั้งที่ผู้ใช้งานโปรแกรม Dreamweaver ...  


Copyright ©2003-2016 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*