CSS filter property : สอน property ของ filter property, เรียน property ของ filter property
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • ประเภทของ 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 )
  • subject :
    ประเภทของ filters

    content :
    filter มี 2 ประเภท ได้แก่
    1. Visual Filters
        เป็น filter ที่แสดงพฤติกรรมของ web page ที่สร้างขึ้นมาในรูปแบบของการแสดงเทคนิคต่างๆ
        เช่น สร้างความเบลอ เป็นต้น ซึ่งคุณสมบัติเหล่านี้สามารถพบเห็นได้ในโปรแกรม graphic เช่น photoshop
    2. Pages Transitions
        เป็นเทคนิคการเปลี่ยนสถานะของ web page จากสถานะหนึ่งไปเป็นอีกสถานะหนึ่ง
        มี 2 ชนิดคือ Blend Transitions และ Reveal Transitions

  • 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 ด้วย

  • 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 ); }

  • 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 ); }

  • value :
    Chroma

    content :
    ใช้กำหนดสีที่กำหนดให้เป็นสีโปร่งใส

    parameter :
    Color กำหนดสีที่ต้องการให้เป็นโปร่งใส ( ชื่อสี, #ค่าสี )

    example :
    { filter: Chroma( Color=black ); }

  • value :
    Shadow ( parameter=value )

    content :
    ใช้สร้างเงา

    parameter :
    Color กำหนดสีของเงา ( ชื่อสี, #ค่าสี ),
    Direction กำหนดทิศทางของเงา ( 0, 45, 90, 135, 180, 225, 270, 315 )

    example :
    { filter: Shadow( Color=black, Direction=135 ); }

  • 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 ); }

  • value :
    Glow ( parameter=value )

    content :
    ใช้สร้างการกระจายของขอบวัตถุ

    parameter :
    Color กำหนดสีที่จะให้ฟุ้งกระจาย ( ชื่อสี, #ค่าสี ),
    Strength กำหนดระยะทางของการกระจายออกมา ( 1-255 )

    example :
    { filter: Glow ( Color=red, Strength=30 ); }

  • 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 ); }

  • value :
    FlipH ( parameter=value )

    content :
    ใช้สร้างภาพสะท้อนกระจกตามแนวตั้ง

    parameter :
    Enabled กำหนดว่าจะให้เป้นภาพสะท้อนหรือไม่ ( 0, 1 )

    example :
    { filter: FlipH ( Enabled=1) ; }

  • value :
    FlipV ( parameter=value )

    content :
    ใช้สร้างภาพสะท้อนกระจกตามแนวนอน

    parameter :
    Enabled กำหนดว่าจะให้เป็นภาพสะท้อนหรือไม่ ( 0, 1 )

    example :
    { filter: FlipV ( Enabled=1 ); }

  • value :
    Invert ( parameter=value )

    content :
    ใช้กำหนดให้ค่าสีเป็นสีที่ตรงกันข้ามกันทั้งหมด

    parameter :
    Enabled กำหนดว่าจะให้เป็นสีที่ตรงกันข้ามหรือไม่ ( 0, 1 )

    example :
    { filter: Invert ( Enabled=1) ; }

  • value :
    Gray ( parameter=value )

    content :
    ใช้กำหนดให้สีของวัตถุเป็นสีเทา

    parameter :
    Enabled กำหนดว่าจะให้สีของวัตถุเป็นสีเทาหรือไม่ ( 0, 1 )

    example :
    { filter: Gray ( Enabled=1 ); }

  • value :
    Xray ( parameter=value )

    content :
    ใช้กำหนดให้วัตถุเป็นภาพขาวดำ

    parameter :
    Enabled กำหนดว่าจะให้วัตถุเป็นภาพขาวดำหรือไม่ ( 0, 1 )

    example :
    { filter: Xray ( Enabled=1 ); }

  • value :
    Mask ( parameter=value )

    content :
    ใช้สร้างหน้ากากตัวอักษร คือส่วนที่เป็นตัวอักษรจะเป็นช่องว่าง 
    สามารถมองทะลุไปถึงพื้นหลังได้

    parameter :
    Color กำหนดสีของหน้ากากที่ล้อมรอบตัวอักษร ( ชื่อสี, #ค่าสี )

    example :
    { filter: Mask ( Color=black ); }

  • 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 ) " />

  • 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();

 
Share This Chapter Login with Facebook