ประเภทของ filters ประเภทของ filters ได้แก่ Visual Filters และ Pages Transitions
filter ใช้กำหนดคุณสมบัติต่างๆของ filter
Alpha ใช้กำหนดระดับความสว่างหรือความทึบ โดยวิธีการไล่สี
Blur ใช้กำหนดความเบลอ
Chroma ใช้กำหนดสีที่กำหนดให้เป็นสีโปร่งใส
Shadow ใช้สร้างเงา
DropShadow ใช้สร้างเงา
Glow ใช้สร้างการกระจายของขอบวัตถุ
Wave ใช้สร้างความบิดเบี้ยวในลักษณะคล้ายคลื่น
FlipH ใช้สร้างภาพสะท้อนกระจกตามแนวตั้ง
FlipV ใช้สร้างภาพสะท้อนกระจกตามแนวนอน
Invert ใช้กำหนดให้ค่าสีเป็นสีที่ตรงกันข้ามกันทั้งหมด
Gray ใช้กำหนดให้สีของวัตถุเป็นสีเทา
Xray ใช้กำหนดให้วัตถุเป็นภาพขาวดำ
Mask ใช้สร้างหน้ากากตัวอักษร คือส่วนที่เป็นตัวอักษรจะเป็นช่องว่าง สามารถมองทะลุไปถึงพื้นหลังได้
RevealTrans ใช้กำหนดรูปแบบการแสดงผล เมื่อมีการเปลี่ยน web page จาก page หนึ่งไปยังอีก page หนึ่ง
BlendTrans ใช้กำหนดให้วัตถุเลื่อนเข้าเลื่อนออก ( ต้องใช้ร่วมกับ javascript )
CSS :: filter property :: ประเภทของ filterslink
subject:ประเภทของ filters
content:filter มี 2 ประเภท ได้แก่
1. Visual Filters
เป็น filter ที่แสดงพฤติกรรมของ web page ที่สร้างขึ้นมาในรูปแบบของการแสดงเทคนิคต่างๆเช่น สร้างความเบลอ เป็นต้น ซึ่งคุณสมบัติเหล่านี้สามารถพบเห็นได้ในโปรแกรม graphic เช่น photoshop
2. Pages Transitions
เป็นเทคนิคการเปลี่ยนสถานะของ web page จากสถานะหนึ่งไปเป็นอีกสถานะหนึ่งมี 2 ชนิดคือ Blend Transitions และ Reveal Transitions
CSS :: filter property :: filterlink
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 ด้วย
CSS :: filter property :: Alphalink
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 ); }CSS :: filter property :: Blurlink
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 ); }CSS :: filter property :: Chromalink
value:Chroma
content:ใช้กำหนดสีที่กำหนดให้เป็นสีโปร่งใส
parameter:Color กำหนดสีที่ต้องการให้เป็นโปร่งใส ( ชื่อสี, #ค่าสี )
example:{ filter: Chroma( Color=black ); }CSS :: filter property :: Shadowlink
value:Shadow ( parameter=value )
content:ใช้สร้างเงา
parameter:Color กำหนดสีของเงา ( ชื่อสี, #ค่าสี ),
Direction กำหนดทิศทางของเงา ( 0, 45, 90, 135, 180, 225, 270, 315 )
example:{ filter: Shadow( Color=black, Direction=135 ); }CSS :: filter property :: DropShadowlink
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 ); }CSS :: filter property :: Glowlink
value:Glow ( parameter=value )
content:ใช้สร้างการกระจายของขอบวัตถุ
parameter:Color กำหนดสีที่จะให้ฟุ้งกระจาย ( ชื่อสี, #ค่าสี ),
Strength กำหนดระยะทางของการกระจายออกมา ( 1-255 )
example:{ filter: Glow ( Color=red, Strength=30 ); }CSS :: filter property :: Wavelink
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 ); }CSS :: filter property :: FlipHlink
value:FlipH ( parameter=value )
content:ใช้สร้างภาพสะท้อนกระจกตามแนวตั้ง
parameter:Enabled กำหนดว่าจะให้เป้นภาพสะท้อนหรือไม่ ( 0, 1 )
example:{ filter: FlipH ( Enabled=1) ; }CSS :: filter property :: FlipVlink
value:FlipV ( parameter=value )
content:ใช้สร้างภาพสะท้อนกระจกตามแนวนอน
parameter:Enabled กำหนดว่าจะให้เป็นภาพสะท้อนหรือไม่ ( 0, 1 )
example:{ filter: FlipV ( Enabled=1 ); }CSS :: filter property :: Invertlink
value:Invert ( parameter=value )
content:ใช้กำหนดให้ค่าสีเป็นสีที่ตรงกันข้ามกันทั้งหมด
parameter:Enabled กำหนดว่าจะให้เป็นสีที่ตรงกันข้ามหรือไม่ ( 0, 1 )
example:{ filter: Invert ( Enabled=1) ; }CSS :: filter property :: Graylink
value:Gray ( parameter=value )
content:ใช้กำหนดให้สีของวัตถุเป็นสีเทา
parameter:Enabled กำหนดว่าจะให้สีของวัตถุเป็นสีเทาหรือไม่ ( 0, 1 )
example:{ filter: Gray ( Enabled=1 ); }CSS :: filter property :: Xraylink
value:Xray ( parameter=value )
content:ใช้กำหนดให้วัตถุเป็นภาพขาวดำ
parameter:Enabled กำหนดว่าจะให้วัตถุเป็นภาพขาวดำหรือไม่ ( 0, 1 )
example:{ filter: Xray ( Enabled=1 ); }CSS :: filter property :: Masklink
value:Mask ( parameter=value )
content:ใช้สร้างหน้ากากตัวอักษร คือส่วนที่เป็นตัวอักษรจะเป็นช่องว่าง
สามารถมองทะลุไปถึงพื้นหลังได้
parameter:Color กำหนดสีของหน้ากากที่ล้อมรอบตัวอักษร ( ชื่อสี, #ค่าสี )
example:{ filter: Mask ( Color=black ); }CSS :: filter property :: RevealTranslink
value:RevealTrans ( parameter=value )
content:ใช้กำหนดรูปแบบการแสดงผล เมื่อมีการเปลี่ยน web page จาก page หนึ่งไปยังอีก page หนึ่ง
parameter:Duration กำหนดระยะเวลาในการแสดงผล ( หน่วยวินาที ),
Transition กำหนดรูปแบบการแสดงผล ( 0-23 ) ( 23 จะ random )
example:<meta content="RevealTrans ( Duration=3.0, Transition=0 ) " http-equiv="Page-Enter"></meta>CSS :: filter property :: BlendTranslink
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();