• <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>
  • 各種常見的濾鏡效果的整理

    發表于:2007-05-25來源:作者:點擊數: 標簽:
    牧月天涯(WWWFIND)整理各種濾鏡演示 本文一些例子借鑒天極網和MSDN 一些濾鏡單獨用于圖片時僅適用于透明的GIF TransitionType: alpha blend 0:box in 1:box out 2:circle in 3:circle out 4:wipe up 5:wipe down 6:wipe right 7:wipe left 8:vertical blinds



















    牧月天涯(WWWFIND)整理各種濾鏡演示


    本文一些例子借鑒天極網和MSDN


    一些濾鏡單獨用于圖片時僅適用于透明的GIF


     


    TransitionType:  Duration:javascript id=b_transition onclick="return b_transition_onclick()" type=button value=Transition name=button1>



     


    Alpha 濾鏡 opacity: finishopacity:style:startx:starty:finishx:finishy:   


    Shadow 濾鏡 color:direction: 


    Blur 濾鏡 add: direction: strength(濃度):px


    DropShadow濾鏡 color: offx: offy: positive(肯定的): 


    Glow濾鏡 color:  stength:  chroma濾鏡  color:


    Wave濾鏡:add: freq(頻率) lightstrength:  phase: strength: 


    Mask濾鏡 color:   Gray濾鏡  Invert濾鏡  Xray濾鏡  Fliph濾鏡  Flipv濾鏡  


     

    Alpha 濾鏡

      "Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標,可以指定各種不同范圍的透明度。



    clearcase/" target="_blank" >cccccc>


    Alpha 濾鏡語法

    {FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,
    style=style,startx=startx,
    starty=starty,finishx=finishx,finishy=finishy)}

      參數含義分別如下:




























    參數

    說明
    opacity 透明度。默認的范圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。
    finishopacity 是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定結束時的透明度。范圍也是0 到 100。
    style 指定透明區域的形狀特征:
    0 代表統一形狀
    1 代表線形
    2 代表放射狀
    3 代表矩形
    startx 漸變透明效果開始處的 X坐標。
    starty 漸變透明效果開始處的 Y坐標。
    finishx 漸變透明效果結束處的 X坐標。
    finishy 漸變透明效果結束處的 Y坐標。
     具體效果應用如下:


















    CSS濾鏡實現

    代碼

     
    正常圖片
    <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"
    width="180" height="120">
    透明度為60
    <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"
    style="filter:alpha(opacity=60)"
    width="180" height="120">
    區域透明度設置,從(0,5)到(90,60)
    <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"
    style="filter:alpha(
    opacity=0, finishopacity=100,
    style=1,
    startx=0,starty=5,
    finishx=90,finishy=60"

    width="180" height="120" >

     

    Shadow 濾鏡







    Shadow 濾鏡
    語法

    {filter:shadow(color=color,direction=direction)}


      利用“Shadow”屬性可以在指定的方向建立物體的投影,COLOR是投影色,DIRECTION是設置投影的方向。其中0度代表垂直向上,然后每45度為一個單位。它的默認值是向左的270度。


      效果如下:



















    CSS濾鏡實現

    代碼

     
    歡迎光臨 <td
    style=filter:shadow
    (color=red, direction=45)

    <b>歡迎光臨</b></td>
    Dragon <td
    style=filter:shadow
    (color=blue,direction=180)

    <b>Dragon</b></td>
    設計在線 <td
    style=filter:shadow
    (color=gray, direction=225)

    <b>設計在線</b></td>

    Blur 濾鏡  用手指在一幅尚未干透的畫面迅速劃過時,畫面就會變得模糊。”Blur"就是產生同樣的模糊效果。







    Blur濾鏡語法

    HTML:{filter:blur(add=add,direction=direction,
    strength=strength)}
    Script語言: [oblurfilter=] object.filters.blur

      參數含義分別如下:
















    參數

    說明
    add 它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的,
    這是一個布爾值:ture (默認)或false
    direction 該參數用來設置模糊的方向。
    0度代表垂直向上,每45度為一個單位,默認值是向左的270度
    strength 只能使用整數來指定,代表有多少像素的寬度將受到模糊影響,默認是5個像素。

      字體設置效果:













    CSS濾鏡實現 歡迎來到Dragon設計在線!
    代碼
    <tdstyle=filter:blur(add=ture,direction=135,strength=10)>
    <b><font size="+3">歡迎來到Dragon設計在線?。?font></b></td>

      圖片設置效果:


















    CSS濾鏡實現

    代碼
    正常圖片
    <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"
    width="180" height="120">
    <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"
    style="filter:blur(strength=10)"
    width="180" height="120" >
    <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"
    style="filter:blur(strength=70)"
    width="180" height="120">

    DropShadow 濾鏡

      “DropShaow",顧名思義就是添加對象的陰影效果。其工作原理是建立一個偏移量,加上色彩。







    DropShadow 濾鏡語法

    {filter:dropshadow
    (color=color,offx=ofx,offy=offy,positive=positive)}

      參數含義如下:



















    參數

    說明
    Color 代表投射陰影的顏色
    offx X方向陰影的偏移量
    offy Y方向陰影的偏移量
    Positive 布爾值
    如果為TRUE(非0),就為任何的非透明像素建立可見的投影
    如果為FASLE(0),就為透明的像素部分建立透明效果

      效果實現:



















    CSS濾鏡實現

    代碼

     
    正常圖片
    圖片效果
    (這里我們把濾鏡代碼寫在<td>里)
    <td style=filter:dropshadow
    (color=gray,
    offx=5,offy=5.positive=0)

    <img src="http://www.csdn.net/CSDN_Common_Header_Footer/Images/logo_csdn.gif"
    width="180" height="120"></td>
    歡迎光臨Dragon設計在線 文字效果
    <td style=filter:dropshadow
    (color=gray,
    offx=2,offy=2.positive=0)

    <b><font size="+1">
    歡迎光臨Dragon設計在線
    </font></b></td>
    Glow 濾鏡

      對一個對象使用"glow"屬性后,這個對象的邊緣就會產生類似發光的效果。







    Glow 濾鏡語法

    {filter:glow(color=color,strength)}

      參數含義如下:













    參數

    說明
    Color 指定發光的顏色
    STRENGTH 強度,值為1到255之間的任何整數,指定發光色力度和范圍。

      實例:















    CSS濾鏡實現

    代碼

     
    歡迎光臨Dragon設計在線

    <td
    style="filter:glow
    (color=#ff0000,strength=2)"

    <font size="+1">
    <b>歡迎光臨Dragon設計在線</b></font>
    </td>
    這樣的效果可以做標題 <td
    style=filter:glow
    (color=#ffff00,strength=5)

    <b><font size="+1">
    這樣的效果可以做標題
    </b></font>
    </td>


    Mask 濾鏡








    {filter:mask(color=color)}

      使用"MASK"屬性可以為對象建立一個覆蓋于表面的膜,其效果就象戴著有色眼鏡看物體一樣 。



    原表格拷屏 


     

    歡迎光臨Dragon設計在線



    CSS 濾鏡效果實現






    歡迎光臨Dragon設計在線



     

    Light 濾鏡








    {filter:light}

      這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性,那么就可以調用它的“方法(Method)"來設置或者改變屬性。“LIGHT"可用的方法有:




























    參數

    說明
    AddAmbient 加入包圍的光源
    AddCone 加入錐形光源
    AddPoint 加入點光源
    Changcolor 改變光的顏色
    Changstrength 改變光源的強度
    Clear 清除所有的光源
    MoveLight 移動光源

      我們可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態的設置光源,可能會產生一些意想不到的效果。









    DHTML Dynamic Lighting Effects

    Move the cursor over the image and see the light track its movement. Click on the image to add additional lights and watch them all track the mouseover movement.

    原文轉自:http://www.kjueaiud.com

    老湿亚洲永久精品ww47香蕉图片_日韩欧美中文字幕北美法律_国产AV永久无码天堂影院_久久婷婷综合色丁香五月

  • <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>