您好!欢迎您光临CSS滤镜基础知识[随缘]_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网络课堂>>>HTML讲座>>>CSS滤镜基础知识[随缘]
CSS滤镜基础知识[随缘]
发表日期:2007/9/4 23:02:00 出处:海洋之心 作者:随缘 发布人:hsb345 已被访问 1413

HTML语言基础

CSS滤镜基础知识

编写:随缘

 

    为了更好地美化网页,我们可以利用CSS滤镜来弥补HTML的不足。 CSS也就是层叠样式表,它可以控制和重设HTML中的绝大多数标记。是对HTML功能的补充,并非一种程序设计语言,其主要功能是通过对HTML标记进行设定,对网页中的对象进行有效控制,使网页能够按照设计者的意愿来显示。而CSS滤镜只不过是CSS众多的功能之一,现在我来介绍几组CSS滤镜的基本应用。

一、Alpha滤镜:

我们先看这样一组代码:

<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: alpha(opacity=100,style=3); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B>海洋之心欢迎朋友们的到来!</B></FONT></P>

效果图如下:

海洋之心欢迎朋友们的到来!

    从效果中我们可以看出,Alpha滤镜使对象呈现出渐变透明的效果,其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中: opacity属性:设置透明度,取值0至100之间的任意数值,100表示完全不透明; style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变。而width:100%则表示参与渐变的对象的宽度,通常都设置为100%。 LINE-HEIGHT:150%(线性高度,也就是俗话说的行高)代表字与上面部分的距离,数字越大,字就越向下。当Alpha滤镜应用于文字时渐变的几种效果差别不是很明显,而用于图片时更加直观,我们再来看看用于图片的效果:

代码如下:
<P align=center><IMG style="FILTER: Alpha(opacity=100,style=2)" height=312 src="http://newphoto.1t1t.com/usr/7d/236415/1187688942_0.gif" width=410></P>

    大家可以根据不同的效果设置style属性及width和LINE-HEIGHT各自的参数。就可得到自己想要的效果来。朋友们试一下吧!

二、Motion Blur滤镜:

    Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标,其值为0和1,0表示“否”,1表示“是”,Direction属性是模糊移动的角度,其值为0至360度;Strength属性是模糊移动的距离。以下是实例效果:

朋友,欢迎你来海洋之心!

代码如下:

<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: 华文行楷">
朋友,欢迎你来海洋之心!</FONT></P>

    朋友们从效果图中可以看到这种模糊效果有点象3D中的投影效果,注意以下几个属性就可以想怎么设置就怎么设置。 FONT-SIZE:30pt字体的大小 add=1表示模糊的目标。0表示“否”,1表示“是” Direction属性是模糊移动的角度,其值为0至360度 Strength属性是模糊移动的距离,代表有多少像素的宽度将受到模糊影响。默认是5个

三、Drop Shadow滤镜:

实例代码:

<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: dropshadow(color=#000000,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">海洋之心是你温馨的家园</FONT></P>

效果:

海洋之心是你温馨的家园

    它的主要特点:透明象素阴影。Drop Shadow滤镜主要产生重叠效果。其属性为: color属性:设置影子文本的颜色; offX和offY属性:影子文本下落的位移值; Positive属性:这个参数是一个布尔值,指定透明象素阴影,如果为1,是为非透明像素建立可见的投影。如果为0,就为透明的像素部分建立透明效果 Drop Shadow滤镜主要是阴影可以设置颜色。

四、Shadow滤镜:

    与Drop Shadow的影子特性不同,Shadow滤镜产生一种阴影效果,它的属性比较简单:它的阴影是向下的 color属性:阴影颜色; direction属性:阴影角度,值取0至360度。实例:

朋友们,看到阴影是向下的了吗?

代码如下:

<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=black,direction=180); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">朋友们,看到阴影是向下的了吗?</FONT></P>

五、Wave滤镜:

    此滤镜对过滤对象生成正弦波变形,造成一种变幻效果。内嵌属性: add属性:布尔型,0或1,0表示将原始对象加入最后效果中,1则反之; freq属性:决定显示的频率,即应出现多少个波形; phrase属性:决定波形的形状,值取0至360之间; strength属性:决定波形的振幅。

实例效果:

我的身子是不是扭曲了?

代码如下:

<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: 华文行楷">我的身子是不是扭曲了?</FONT></P>

六、Glow滤镜:

    Glow滤镜生成一种光晕效果。属性: color属性:光晕颜色;strength:是强度的表现,可以从1到255之间的任何整数来指定这个力度实例代码与效果:它的特点是有光晕。

先看看效果吧:

呵,是不是有光晕了啊

 

代码如下:

<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: glow(color=gray,strength=4); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">呵,是不是有光晕了啊</FONT></P>

附注:如果朋友们不熟悉代码你可以把代码复制粘贴到你的后台,但注意:一定要插在所有边框代码<TD>的后面哦。这个很重要,如果插错地方可能会造成乱码或错码的。然后修改代码里面红色部分的数值就可以达到你想要的效果了。文字的字体、大小、颜色、包括滤镜效果的颜色和大小你都可以随意调整。动手试试吧,相信你一定能够编辑出非常漂亮的美文美帖哦。

七、Flip滤镜:

    Flip滤滤镜主要是产生两种变换效果,即上下变换和左右变换。FlipV产生上下变换,FlipH产生左右变换。

效果图如下:

正常图片

正常图片

水平(左右方向的)翻转代码:

<P align=center><IMG style="FILTER: fliph" height=270 src="http://newphoto.1t1t.com/usr/7d/236415/1188280201_0.jpg" width=180></P>

垂直(上下方向的)翻转代码:

<P align=center><IMG style="FILTER: flipv" height=270 src="http://newphoto.1t1t.com/usr/7d/236415/1188280496_0.jpg" width=180></P>

    当然,这种翻转同样适用于文字,感兴趣的朋友不妨一试。

附注:如果朋友们不会编写代码也没关系,你只要会复制粘贴就可以去套用这些代码,换掉里面的图片地址就可以达到你自己所想要的效果。所有这些代码你就拿去用吧。

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167