深入透析样式表滤镜(上)

2016-01-29 12:41 4 1 收藏

深入透析样式表滤镜(上),深入透析样式表滤镜(上)

【 tulaoshi.com - Html 】

    样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰。只用html制作的网页,对页面内各部分的修饰能力有限且语句烦锁,样式表正是弥补这一缺陷的有力技术,它语句文法简单,只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能,使网页更加生动活泼,从而获得满意的效果。当然,样式表的强大还依靠的就是它的滤镜功能。因为有了滤镜,大家就可以轻易地创造出“专业”的艺术效果。为了能帮助大家高效使用好样式表滤镜,笔者将对样式表滤镜各方面的内容进行详细介绍。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

    一、什么是样式表滤镜

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

    说到滤镜,其实它并不是对图像进行了什么处理,而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样式表一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上,例如图片、文本、以及一些对象,为页面添加一些丰富的变化。如果大家有一些脚本语言的基础,能够把滤镜效果与类似javascript的脚本代码做一些结合,就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个之多,不过要欣赏到这些滤镜的特效,必须要求用户的浏览器必须在4.0/NC6.0之上,因为只有这些版本的浏览器才能支持样式表滤镜效果。

    二、常用的样式表滤镜

    随着样式表技术的不断成熟,其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们,将可以产生意想不到的效果。在操作上,用户只需要了解具体滤镜的实际效果后,就能根据实际进行微调了。为了使大家能有针对性地使用滤镜,笔者下面就把一些常用滤镜的功能和参数详细介绍如下:

    1、α滤镜

    作用:该滤镜可以实现各种溶入效果,如果大家将该滤镜与网页脚本语言结合起来,对滤镜的参数进行处理的话,就能很轻易地做出淡入淡出的效果来。

    语法:{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坐标。

    2、模糊滤镜

    作用:该滤镜主要是让图象产生一种模糊效果。

    语法:{filter:blur(add=add,direction=direction,strength=strength)}

    参数:该滤镜主要包括三个参数,其中add是用来指定图象是否被改变成印象派的模糊效果,模糊效果是按顺时针的方向进行的,它的数值应该是ture或false;direction参数是用来设置模糊的方向的,其中0度代表垂直向上,每45度为一个单位,默认值是向左的270度;strength 参数代表有多少像素的宽度将受到模糊影响,缺省的参数值是5个像素,而且该参数值只能使用整数来指定。

    3、斜影滤镜

    作用:该滤镜主要是为对象建立轮廓的影子效果的,它可以在指定的方向建立物体的投影;

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

    参数:斜影滤镜只有两个参数,其中color代表投影的底色,该数值是用英文字母来代替的,例如投影底色是红色的话,就应该设置color=red;direction参数是用来设置投影方向的,如果该数值是0的话,就代表垂直投影,此外该数值每45度为一个单位,它的默认值是向左的270度。

    4、发光滤镜

    作用:该滤镜可以给图象或者文字产生一种发光效果;

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

    参数:该滤镜的color参数与阴影滤镜的color参数功能几乎是一样的,不过这里的color参数是用来设置发光颜色的;strength参数是用来指定发光强度的,其值为1到255之间的任何整数。

    5、灯光滤镜

    作用:灯光滤镜是模拟光源来投射文字或者图象,使图象和文字能产生一定的投射效果;

    语法:{

来源:https://www.tulaoshi.com/n/20160129/1487172.html

延伸阅读
标签: Web开发
用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。 事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局...
标签: Web开发
类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计。基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: 标识符 class=类别名网页内容 实例: <html> <head> <title>CSS例子</title> <style type="t...
    web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。     事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用tabl...
标签: Web开发
CSS——层叠样式表的使用已经变得越来越普及,常见的样式表使用方法有三种:内部样式表文件、外部链接样式表、内部嵌入样式表。关于样式表的优越意义和详细用法以及具体的设置参数不是短短的一篇文章可以说清的。早期创建CSS需要有专门的知识,需要直接编写样式表文件。如今,Dreamweaver使得这项工作可以在一个统一的界面中进行,通过简单的操...
标签: Web开发
  1、在一个网页中同时调用CSS的多种引入方式     在HTML中引入CSS的方式很多,例如直接插入式,使用 链接外部样式表,使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问,这些引入方式能不能同时在一个网页中被调用,它们之间会不会产生混乱?其实,我们大可不必这么担心,这就...

经验教程

474

收藏

66
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部