filter
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:30 |
value:BlendTrans ( parameter=value )
content:ใช้กำหนดให้วัตถุเลื่อนเข้าเลื่อนออก ( ต้องใช้ร่วมกับ javascript )
parameter:Duration กำหนดระยะเวลาในการแสดงผล
example:{ filter: BlendTrans ( Duration=10 ); }
object.style.filter = "blendTrans(duration=10)";
object.filters.blendTrans.Apply();
object.style.visibility = "visible";
object.filters.blendTrans.Play();
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:30 |
value:RevealTrans ( parameter=value )
content:ใช้กำหนดรูปแบบการแสดงผล เมื่อมีการเปลี่ยน web page จาก page หนึ่งไปยังอีก page หนึ่ง
parameter:Duration กำหนดระยะเวลาในการแสดงผล ( หน่วยวินาที ),
Transition กำหนดรูปแบบการแสดงผล ( 0-23 ) ( 23 จะ random )
example:<meta http-equiv="Page-Enter" content="RevealTrans ( Duration=3.0, Transition=0 ) " />
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:29 |
value:Mask ( parameter=value )
content:ใช้สร้างหน้ากากตัวอักษร คือส่วนที่เป็นตัวอักษรจะเป็นช่องว่าง
สามารถมองทะลุไปถึงพื้นหลังได้
parameter:Color กำหนดสีของหน้ากากที่ล้อมรอบตัวอักษร ( ชื่อสี, #ค่าสี )
example:{ filter: Mask ( Color=black ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:29 |
value:Xray ( parameter=value )
content:ใช้กำหนดให้วัตถุเป็นภาพขาวดำ
parameter:Enabled กำหนดว่าจะให้วัตถุเป็นภาพขาวดำหรือไม่ ( 0, 1 )
example:{ filter: Xray ( Enabled=1 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:29 |
value:Gray ( parameter=value )
content:ใช้กำหนดให้สีของวัตถุเป็นสีเทา
parameter:Enabled กำหนดว่าจะให้สีของวัตถุเป็นสีเทาหรือไม่ ( 0, 1 )
example:{ filter: Gray ( Enabled=1 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:29 |
value:Invert ( parameter=value )
content:ใช้กำหนดให้ค่าสีเป็นสีที่ตรงกันข้ามกันทั้งหมด
parameter:Enabled กำหนดว่าจะให้เป็นสีที่ตรงกันข้ามหรือไม่ ( 0, 1 )
example:{ filter: Invert ( Enabled=1) ; }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:29 |
value:FlipV ( parameter=value )
content:ใช้สร้างภาพสะท้อนกระจกตามแนวนอน
parameter:Enabled กำหนดว่าจะให้เป็นภาพสะท้อนหรือไม่ ( 0, 1 )
example:{ filter: FlipV ( Enabled=1 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:28 |
value:FlipH ( parameter=value )
content:ใช้สร้างภาพสะท้อนกระจกตามแนวตั้ง
parameter:Enabled กำหนดว่าจะให้เป้นภาพสะท้อนหรือไม่ ( 0, 1 )
example:{ filter: FlipH ( Enabled=1) ; }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:28 |
value:Wave ( parameter=value )
content:ใช้สร้างความบิดเบี้ยวในลักษณะคล้ายคลื่น
parameter:Add กำหนดว่าจะให้บิดเบี้ยวหรือไม่ ( true, false ),
Freq กำหนดจำนวนลูกคลื่น ยิ่งมากยิ่งบิดเบี้ยวมาก ( ตัวเลข ),
LightStrength กำหนดความกว้างของคลื่นแต่ละลูก ( 0-100 ),
Phase กำหนดตำแหน่งเริ่มต้นของลูกคลื่น ( 0-100 ),
Strength กำหนดค่าการบิดตัวของเกลียวคลื่น ( 0-255 )
example:{ filter: Wave( Add=true, Freq=3, LightStrength=10, Phase=50, Strength=5 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:28 |
value:Glow ( parameter=value )
content:ใช้สร้างการกระจายของขอบวัตถุ
parameter:Color กำหนดสีที่จะให้ฟุ้งกระจาย ( ชื่อสี, #ค่าสี ),
Strength กำหนดระยะทางของการกระจายออกมา ( 1-255 )
example:{ filter: Glow ( Color=red, Strength=30 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:28 |
value:DropShadow ( parameter=value )
content:ใช้สร้างเงา
parameter:Color กำหนดสีของเงา ( ชื่อสี, #ค่าสี ),
OffX กำหนดระยะห่างระหว่างเงากับวัตถุ ( หน่วย pixel ),
OffY กำหนดระยะห่างระหว่างเงากับวัตถุ ( หน่วย pixel ),
Positive กำหนดรูปแบบของเงา ( true หรือ positive, false หรือ nagative )
example:{ filter: DropShadow( Color=blue, OffX=20, OffY=20, Positive=true ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:27 |
value:Shadow ( parameter=value )
content:ใช้สร้างเงา
parameter:Color กำหนดสีของเงา ( ชื่อสี, #ค่าสี ),
Direction กำหนดทิศทางของเงา ( 0, 45, 90, 135, 180, 225, 270, 315 )
example:{ filter: Shadow( Color=black, Direction=135 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:27 |
value:Chroma
content:ใช้กำหนดสีที่กำหนดให้เป็นสีโปร่งใส
parameter:Color กำหนดสีที่ต้องการให้เป็นโปร่งใส ( ชื่อสี, #ค่าสี )
example:{ filter: Chroma( Color=black ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:25 |
value:Blur ( parameter=value )
content:ใช้กำหนดความเบลอ
parameter:Add กำหนดให้เบลอหรือไม่ ( true, false ),
Direction กำหนดทิศทางการเบลอ ( 0, 45, 90, 135, 180, 225, 270, 315 ),
Strength กำหนดค่าความเบลอ ( หน่วย pixel )
example:{ filter: Blur ( Add=true, Direction=90, Strength=50 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:25 |
value:Alpha( parameter=value )
content:ใช้กำหนดระดับความสว่างหรือความทึบ โดยวิธีการไล่สี
parameter:Opcacity กำหนดเปอร์เซ็นต์เริ่มต้นของความทึบแสง ( 0 - 100 ),
FinishOpacity กำหนดเปอร์เซ็นต์สิ้นสุดของความทึบแสง ( 0 - 100 ),
Style กำหนดรูปแบบของการไล่สี ( 0 - 3 ),
StartX, StartY กำหนดตำแหน่งเริ่มต้นในแกน x, y,
FinishX, FinishY กำหนดตำแหน่งสิ้นสุดในแกน x, y
example:{ filter: Alpha( Opacity=10, FinishOpacity=100, Style=2 ); }
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:25 |
property:filter
value:Alpha, Blur, Chroma, Shadow, DropShadow, Glow, Wave, FlipH, FlipV, Invert,
Gray, Xray, Mask, BlendTrans, RevealTrans
content:ใช้กำหนดคุณสมบัติต่างๆของ filter
example:{ filter: Glow( Color=red, Strength=5 ); }
comment:ถ้าใช้กับ tag div หรือ tag span ต้องกำหนด width ด้วย
|
|
Written by รับทำเว็บไซต์
|
|
Wednesday, 21 April 2010 19:24 |
subject:ประเภทของ filters
content:filter มี 2 ประเภท ได้แก่
1. Visual Filters
เป็น filter ที่แสดงพฤติกรรมของ web page ที่สร้างขึ้นมาในรูปแบบของการแสดงเทคนิคต่างๆ
เช่น สร้างความเบลอ เป็นต้น ซึ่งคุณสมบัติเหล่านี้สามารถพบเห็นได้ในโปรแกรม graphic เช่น photoshop
2. Pages Transitions
เป็นเทคนิคการเปลี่ยนสถานะของ web page จากสถานะหนึ่งไปเป็นอีกสถานะหนึ่ง
มี 2 ชนิดคือ Blend Transitions และ Reveal Transitions
|
|
|
|
|
เราแบ่งปันสิ่งดีๆ ให้กัน
|
