การทำ Gradient ภาพ บางคนอาจจะรู้จักแแล้วแต่ส่วนใหญ่จะใช้โปรแกรม Graphic ทำแต่ที่จริงแล้ว dreamweaver ก็สามารถทำได้เช่นกัน มาดูขั้นตอนการทำกันเลย

ขั้นตอนการทำ

1. เปิดเอกสาร หรือสร้างเอกสาร Html ที่เราต้องการทำ Gradient ขึ้นมา ดังภาพ



2. จากนั้นให้เราทำการสร้าง CSS Style ขึ้นมาก่อน โดยมีขั้นตอนดังนี้
     2.1 คลิกขวาที่พื้นที่ว่างในหน้าจอจะมีเมนูขึ้นมาให้เราเลือก Css Styles --> New Css Style ดังภาพ



     2.2 จะมีหน้าต่าง New Css Style แสดงขึ้นมาให้เราใส่ชื่อ gradient ดังภาพ



     2.3 เลือก Extensions --> Alpha ดังภาพ



โดยมี Properties ที่เกี่ยวข้องดังนี้
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity = ความจางของภาพ ณ ตำแหน่งเริ่มต้น
FinishOpacity = ความจางของภาพ ณ ตำแหน่งสิ้นสุด
Style = รูปแบบของการทำ Alpha มีอยู่ 4 รูปแบบ
StartX = ตำแหน่งที่ให้เริ่มทำ Alpha แกน X
StartY = ตำแหน่งที่เริ่มทำ Alpha แกน Y
FinishX = ตำแหน่งสิ้นสุดการทำ Alpha แกน X
FinishY = ตำแหน่งสิ้นสุดการทำ Alpha แกน Y

ค่าที่ผมกำหนดใน Css มีดังนี้
Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=500)

3. หลังจากที่เราได้ Css แล้วก็มาถึงขั้นตอนการนำไปใช้ เริ่มต้นให้เรา Insert ภาพลงมาในเว็บเพจของเรา ดังภาพ
* ในที่นี้ผมใช้ภาพขนาด 500x500 px



4. จากนั้นให้เรานำ Mouse ไปคลิกที่รูปภาพ หลังจากนั้นเลือก Quick Tag Editor ที่ Properties ดังภาพ



5. จากนั้นตบแต่ง Background ให้เข้ากับภาพแล้วลอง Preview ดังภาพ



6. เป็นอย่างไรกันบ้างทำได้อย่างตัวอย่างหรือเปล่า แต่คิดว่าคงไม่ยาก ในส่วนของ Extension ยังมี Effect อื่นๆ อีกมากมายลองนำมาใช้งานกับเว็บของเราดูนะครับ