標題: 特效滤镜
rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:02 
14.199.250.103
分享  私人訊息  頂部



代码: <center> <TABLE style="BORDER-BOTTOM-STYLE: double; FILTER: progid:DXImageTransform.Microsoft.Shadow(color=#000000,strength=20); BORDER-RIGHT-STYLE: double; WIDTH: 500px; BORDER-TOP-STYLE: double; BORDER-LEFT-STYLE: double" border=1 cellSpacing=3 borderColor=#ffffff cellPadding=3 bgColor=#e2ffd1> <TBODY> <TR> <TD> <P align=center><IMG border=0 src="圖片網址" width=500> </P> </TD></TR></TBODY></TABLE></center>





代码:<center> <TABLE style="BORDER-BOTTOM-STYLE: double; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#000000,strength=10); BORDER-RIGHT-STYLE: double; WIDTH: 500px; BORDER-TOP-STYLE: double; BORDER-LEFT-STYLE: double" border=1 cellSpacing=3 borderColor=#ffffff cellPadding=3 bgColor=#e2ffd1> <TBODY> <TR> <TD> <P align=center><IMG border=0 src="圖片" width=320> </P> </TD></TR></TBODY></TABLE></center>





代码:<CENTER> <DIV style="BORDER-BOTTOM-STYLE: double; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#0000ff,strength=10); BORDER-RIGHT-STYLE: double; WIDTH: 550px; BORDER-TOP-STYLE: double; BORDER-LEFT-STYLE: double"> <TABLE border=5 cellSpacing=20 cellPadding=20 width=550> <TBODY> <TR> <TD> <P align=center><IMG border=0 src="圖片網址"width=320></P> </TD></TR></TBODY></TABLE> </DIV></CENTER>





代码:<CENTER> <DIV style="BORDER-BOTTOM-STYLE: ridge; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#0000ff,strength=10); BORDER-RIGHT-STYLE: ridge; WIDTH: 550px; BORDER-TOP-STYLE: ridge; BORDER-LEFT-STYLE: ridge"> <TABLE border=10 cellSpacing=20 borderColor=#0d96e7 cellPadding=20 width=550> <TBODY> <TR> <TD> <P align=center><IMG border=0 src="圖片網址" width=320></P> </TD></TR></TBODY></TABLE> </DIV></CENTER>



文字內容



代码:<center> <TABLE style="BORDER-BOTTOM-STYLE: solid; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#0000ff,strength=10); BORDER-RIGHT-STYLE: solid; WIDTH: 400px; BORDER-TOP-STYLE: solid; BORDER-LEFT-STYLE: solid" borderColor=#e2ffd1 bgColor=#e2ffd1> <TBODY> <TR> <TD> <P align=center><FONT size=7>文字內容</FONT></P> </TD></TR></TBODY></TABLE></center>



文字內容



代码: <center> <TABLE style="BORDER-BOTTOM-STYLE: double; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#23950F,strength=10); BORDER-RIGHT-STYLE: double; WIDTH: 400px; BORDER-TOP-STYLE: double; BORDER-LEFT-STYLE: double" border=1 cellSpacing=3 borderColor=#ff0000 cellPadding=3 bgColor=#e2ffd1 color="#E2FFD1" size="3"> <TBODY> <TR> <TD> <P align=center><FONT size=7>文字內容</FONT></P> </TD></TR></TBODY></TABLE></center>



文字內容



代码:<CENTER> <TABLE style="BORDER-BOTTOM-STYLE: dashed; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#23950F,strength=4); BORDER-RIGHT-STYLE: dashed; WIDTH: 400px; BORDER-TOP-STYLE: dashed; BORDER-LEFT-STYLE: dashed" border=2 cellSpacing=3 borderColor=#ff0000 cellPadding=3 bgColor=#e2ffd1 color="#E2FFD1" size="3"> <TBODY> <TR> <TD> <P align=center><FONT size=7>文字內容</FONT></P> </TD></TR></TBODY></TABLE></CENTER>



文字內容



代码:<CENTER> <TABLE style="BORDER-BOTTOM-STYLE: dotted; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#23950F,strength=4); BORDER-RIGHT-STYLE: dotted; WIDTH: 400px; BORDER-TOP-STYLE: dotted; BORDER-LEFT-STYLE: dotted" border=5 cellSpacing=3 borderColor=#ff0000 cellPadding=3 bgColor=#e2ffd1 color="#E2FFD1"> <TBODY> <TR> <TD> <P align=center><FONT size=7>文字內容</FONT></P> </TD></TR></TBODY></TABLE></CENTER> [[i] 本帖最後由 rainbow 於 2013-7-1 11:04 編輯 [/i]]


rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:06 
14.199.250.103

















rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:09 
14.136.98.252
三張原圖:






加上代碼特效後的效果:

圓形漸變透明:

代碼:<center><img src="圖片網址" width=175 style="filter:alpha(opacity=100,style=2,finishopacity=0)"></center>

陰影框(適合透明背景的 gif 圖片):

代碼: <center><img src="圖片網址" style="filter:shadow(color=#32cd32)"></center>



色彩顛倒:

代碼:<center><img src="圖片網址" style="filter:invert"></center>

粒狀陰影:

代碼:<center><img src="圖片網址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"></center>

模糊效果:

代碼:<center><img src="圖片網址" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"></center>

X光效果:

代碼:<center><img src="圖片網址" width=175 style="filter: Xray"></center>

浮雕效果:

代碼:<center><img src="圖片網址" width=175 style="filter:progid:dximagetransform.microsoft.emboss()"></center>

水波效果:

代碼:<center><img src="圖片網址" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>

垂直倒影效果:

代碼:<center><img src="圖片網址" style="filter:flipv"></center>

水平鏡像效果:

代碼:<center><img src="圖片網址" width=175 style="filter:fliph"></center>

凸出框:

代碼:<center><img style="BORDER-RIGHT: #ff88ff 25px outset; BORDER-TOP: #ff88ff 25px outset; BORDER-LEFT: #ff88ff 25px outset; BORDER-BOTTOM: #ff88ff 25px outset" src="圖片網址"></center>

郵票框:

代碼:<center> <div style="width:300px; height:250px"> <TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; BORDER-BOTTOM: #f6ae56 3px dashed" cellSpacing=5 cellPadding=0 bgColor=#f6ae56> <TBODY> <TR> <TD vAlign=center align=middle width=300 bgColor=#aeffae height=250> <IMG alt="" src="圖片網址"> </TD></TR></TBODY></TABLE> </div></center>

立體陰影框:


代碼:<center> <div style="width:300px; height:200px"> <table width=300 height=200 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"> <tr> <td bgcolor="#ffffff" align=center valign=middle> <img src="圖片網址"> </td></tr></table> </div></center>


[[i] 本帖最後由 rainbow 於 2013-7-1 11:11 編輯 [/i]]


rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:17 
14.136.98.252
Blur濾鏡文字的使用

代碼:<center> <div style="FONT-SIZE: 50pt; filter: blur(add=1,direction=30,strength=8); WIDTH: 100%; COLOR: blue; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒體"><b>Blur濾鏡文字的使用</b> </div></center>

shadow濾鏡文字的使用

代碼:<center> <div style="FONT-SIZE: 50pt; filter: shadow(color=purple,direction=135); WIDTH: 100%; COLOR:blue; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒體"><b>shadow濾鏡文字的使用</b></div></center>

dropshadow濾鏡的使用

代碼:<div style="FONT-SIZE: 40pt; filter: dropshadow(color=#B0C4DE,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: blue; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒體"><b>dropshadow濾鏡的使用</b> </div></center>

wave濾鏡文字的使用

代碼:<div style="FONT-SIZE: 50pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 100%; COLOR: blue; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒體"><b>wave濾鏡文字的使用</b> </div></center>

glow濾鏡文字的使用

代碼:<div style="FONT-SIZE: 50pt; filter: glow(color=purple,strength=4); WIDTH: 100%; COLOR: blue; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒體"><b>glow濾鏡文字的使用</b><br> </div></center>

chroma濾鏡的使用

代碼:<center> <div style="width:600px"> <TABLE align=center cellpadding=0 cellspacing=0 background=http://www.zxtx.org/user/yiyi/yiyijch/14/200551319273660746.gif bordercolor=#fa29be border=1> <TBODY> <TR> <TD style="FILTER: chroma(color=#336699"> <TABLE align=center bgcolor=#E1FCCA> <TBODY> <TR> <TD align=middle> <FONT style="FONT-SIZE: 50pt" face=黑體 color=#336699><b>chroma濾鏡的使用</b></FONT> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

mask濾鏡文字的使用

代碼:<center> <div style="width:650px"> <TABLE align=center background=http://org112.zpcdn.com/0/5753/36819772.b73c01.gif rules=none border=1 bordercolor=#ffffff> <TBODY> <TR> <TD style="FILTER: mask(color=#ffffff)" align=middle> <FONT style="FONT-SIZE: 50pt" face=黑體 color=#336699>mask濾鏡文字的使用</FONT> </TD></TR></TBODY></TABLE> </div></center>




rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:20 
14.136.98.252

歡迎光臨


代碼:<P align=center> <TABLE> <TBODY> <TR> <TD style="FILTER: mask(color=#ffffff) shadow(color=#ff0000,direction=135) chroma(color=#ffffff)" align=middle> <FONT style="FONT-SIZE: 60pt; WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 150%; FONT-FAMILY: 黑體"><B>歡迎光臨</B></FONT> </TD></TR></TBODY></TABLE></P>

歡迎光臨


代碼:<P align=center> <TABLE> <TBODY> <TR> <TD style="FILTER: mask(color=#ffffff) shadow(color=#0000ff,direction=45) chroma(color=#ffffff)" align=middle> <FONT style="FONT-SIZE: 60pt; WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 150%; FONT-FAMILY: 隸書"><B>歡迎光臨</B></FONT> </TD></TR></TBODY></TABLE></P>

歡迎光臨

代碼:<center> <TABLE> <TBODY> <TR> <TD style="FILTER: mask(color=#ffffff) dropshadow(color=#0000ff,offx=-3,offy=-3,positive=1) chroma(color=#ffffff)" align=middle> <FONT style="FONT-SIZE: 60pt; WIDTH: 100%; COLOR: #000000; LINE-HEIGHT: 150%; FONT-FAMILY: 黑體"><B>歡迎光臨</B></FONT> </TD></TR></TBODY></TABLE></center>

空心字體:
歡迎光臨

代碼:<TABLE align=center> <TBODY> <TR> <TD style="FILTER: glow(strength=4) mask(color=#ff0000) chroma(color=#ff0000)" align=middle> <FONT style="FONT-SIZE: 70pt; WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 150%; FONT-FAMILY: 黑體"><B>歡迎光臨</B></FONT> </TD></TR></TBODY></TABLE>

[[i] 本帖最後由 rainbow 於 2013-7-1 11:24 編輯 [/i]]


rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:31 
14.136.98.252


代碼: <DIV style="FILTER: glow(color=magenta strength=9); LEFT: 100px; OVERFLOW: hidden; WIDTH: 660px; COLOR: white; POSITION: relative; TOP: 30px; HEIGHT: 250px"> <?import namespace = v urn = "urn:schemas-microsoft-com:vml" implementation = "#default#VML" declareNamespace /> <v:line class=time id=a3 style="LEFT: 30px; POSITION: absolute; TOP: 100px" begin="0" from = "0,0" to = "400pt,.300pt" filled = "t" fillcolor = "red" stroked = "t" strokecolor = "#ffc" strokeweight = "1.5pt"><v:path textpathok = "t"></v:path> <v:textpath style="FONT-FAMILY: 隸書" on = "t" fitpath = "t" string = "歡迎光臨"></v:textpath> <v:fill src = "http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0024.gif" type = "frame" opacity = "1"></v:fill> </v:line> <?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /> <t:transitionFilter id=m12a from = "0" targetElement = "a3" to = "1" type = "fade" subType = "crossFade" mode = "in" autoReverse = "false" dur = "3" repeatCount = "indefinite"></t:transitionFilter></DIV>

注意以上代码里 v:line 的 id 值与 t:transitionFilter 里的 targetElement 的关系,两者必须相同。但在同一页面里不能取用相同的 id 值,若有人用了 id=a5,下一个帖子不能再用a5,否则全部都不会闪烁了。
此代码无法预览,只能直接发出看效果。


[[i] 本帖最後由 rainbow 於 2013-7-1 11:35 編輯 [/i]]


rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:40 
14.199.250.58

滤镜特效代码阐释

1:各种滤镜的样式,要使用滤镜的样式,须添加样式代码 style="……"

  1-1:Alpha   滤镜,具有透明层次效果。

       代码形式 style="filter: alpha(opacity=100,style=3)"

       注解 opacity  代表透明度水准,可选值从 0-100
       style    指定透明区域的样式,可选 0(代表统一形状),1(线性透明),2(放射状透明),3(方块状透明)


  1-2: Blur  滤镜,模糊效果

    代码形式 style="filter: blur(add=1,direction=30,strength=5)"

           add 属性是用来确定是否在运动模糊中使用原有目标,可选值 0(表示否,一般用来处理文字),1 (表示是,一般用来处理图片)。
           direction  属性用来是设置模糊的方向,可选值 0-360,要是不指定的情况下,默认是270。
           strength 属性,代表有多少像素受到模糊的影响。只能用整数来指定,不指定的请宽下默认值是 5。

  1-3:Shadow  滤镜,阴影投射效果

     代码形式:style="filter: shadow(color=black,direction=180)"
     
               color 投射的阴影颜色属性。
               direction  阴影投射的角度,可选 0-360。

1-4:DropShadow 滤镜,产生重叠效果。

   代码形式:style="filter: dropshadow(color=lightgreen,offX=5,offY=3,Positive=1)"

                  color  重叠的颜色
                  offX   阴影投射的X轴位置
                  offY   阴影投射的Y轴位置
                  Positive  指定透明象素阴影,布尔型,0为是,1为否

1-5:Wave  滤镜,正弦波变形
  代码形式:style="filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30)"

                   add 布尔型,0或1,0表示将原始对象加入最后效果中,1则反之
                   lightstrength 对波纹增加光影效果,可选0-100
                   strength   表示振幅的大小
                   freq  表示波纹的频率,在指定的对象上要产生多少个完整的波纹
                   phrase  设置正弦波的偏移量,可选 0-100

  1-6:Glow 滤镜,光晕效果
       代码形式   style="filter: glow(color=gray,strength=4)"
                   color  光晕颜色
                   strength  光晕的厚度。

   1-7: FlipV 滤镜,  FlipH 滤镜
        代码形式: style="filter: FlipV"
      Flip滤滤镜主要是产生变换效果,即上下变换和左右变换。
FlipV产生上下变换,
FlipH产生左右变换


   1-8:gray 黑白滤镜,(多用于图片的转换。黑白效果)
        代码形式      style="filter: gray"

   1-9: invert  反色滤镜,(多用于图片)
         代码形式: style="filter: invert"

   1-10:Xray 滤镜,使对象变得像被 x光照射一样,(多用于图片)
         代码形式: style="filter:Xray"

   1-11: Chroma  滤镜,可以设置一个对象中指定的颜色为透明色
         代码形式:style="filter:chroma(color=#000000)"


rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:41 
14.199.250.58
立体阴影双色边框














rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3959
發表於 2013-7-2 11:48 
14.199.250.58
欢迎朋友光临


注:BACKGROUND-COLOR: #ffffff 可根据需要改变背景颜色。



[[i] 本帖最後由 rainbow 於 2013-7-1 11:54 編輯 [/i]]