注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

探求优美

思想知识休闲吧

 
 
 

日志

 
 
关于我

相貌与身材榜上无名,兴趣与技能尚属典雅和时尚,思想与智能比较前卫的我平时喜爱演讲辩论、看书学习、消遣书画、文案书写、策划设计等。更令身边朋友关注的是我对人际交流与沟通和青少儿教育(包括MBA和MPA教育)及传媒运作有很深厚的研究与操作。同时本人性情活跃、爱好广泛、善于交友…!

网易考拉推荐

网页制作-各种滤镜的样式  

2011-07-29 11:36:58|  分类: 电脑网络知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

各种滤镜的样式

Good fun网摘

 

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

2-1: alpha滤镜的使用在文字上的应用。

<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: alpha(opacity=100,style=2); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>
</FONT></P>

2-2: Blur滤镜的使用在文字上的应用。

<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: blur(add=1,direction=30,strength=5); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
Blur滤镜文字的使用
</FONT></P>

2-3: shadow滤镜的使用在文字上的应用。

<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: shadow(color=black,direction=180); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
shadow滤镜文字的使用</FONT></P>  

2-4: dropshadow滤镜的使用在文字上的应用。

<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: dropshadow(color=lightgreen,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
dropshadow滤镜文字的使用
</FONT></P>

2-5: wave滤镜的使用在文字上的应用。(第二个添加了倒影的滤镜)

<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
wave滤镜文字的使用
</FONT></P>

<P align=center>
<FONT style="FONT-SIZE: 30pt; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 方正舒体">wave滤镜文字的使用</FONT>
<FONT style="FONT-SIZE: 30pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30) flipv; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
wave滤镜文字的使用
</FONT></P>

2-6: glow滤镜的使用在文字上的应用。

<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: glow(color=gray,strength=4); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
glow滤镜文字的使用<br>glow滤镜文字的使用<br>
</FONT></P>


2-7: FlipV滤镜的使用在文字上的应用。

<P align=center>
<FONT style="FONT-SIZE: 30pt; WIDTH: 100%; COLOR: red; FONT-FAMILY: 方正舒体">
FlipV滤镜文字的使用
<FONT style="FONT-SIZE: 30pt; filter: FlipV; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
FlipV滤镜文字的使用
</FONT></FONT><br>
</P>


2-8: chroma滤镜的使用在文字上的应用。

<TABLE align=center cellpadding=0 cellspacing=0  background=http://nxm.16789.net/s-helpSite/domName/nxm/2004121215594122335.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699">
<TABLE align=center bgcolor=#000000>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 40pt" face=黑体 color=#336699><b>网页课堂,chroma滤镜的使用</b></FONT>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

有些朋友可能不知道用途!这里Good fun就简单的介绍一下:

就拿第一个滤镜为例,你要加到图片上,就是在代码里添加一个滤镜属性就可以了!

比如,普通的贴图代码是:“<img  src=图片地址   width=图片宽度  height=图片高度>”

网页制作-各种滤镜的样式 - Good fun - Good fun网易博客
就像这张图,他的代码就是:“<IMG  WIDTH=498   HEIGHT= 331   src="http://img43.bimg.126.net/photo/u5rpRE5R5a-r1CUYAjqhjw==/4271101296609005912.jpg">”
我们现在给他添加一个滤镜的属性(拿第一个滤镜为例),style="filter: alpha(opacity=100,style=3)",

那么代码就变成:
<IMG  style="filter: alpha(opacity=100,style=3)",  WIDTH=498   HEIGHT= 331   src="
http://img43.bimg.126.net/photo/u5rpRE5R5a-r1CUYAjqhjw==/4271101296609005912.jpg"> ”
 
那么效果就是:

 
网页制作-各种滤镜的样式 - Good fun - Good fun网易博客
 

 这个就是我们常见的渐变效果,有兴趣的朋友你可以一个个试试。

提示:只有自己的html网站和网页才能全部显示,博客空间不同,支持的代码显示也不一样!网易博客对好多滤镜代码都给屏蔽了,有些不能被显示!

 

  评论这张
 
阅读(101)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017