ขั้นตอนการทำ
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 ดังภาพ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น