分享
 
 
 

代码的魔术——CSS滤镜之旅

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

编者的话:CSS 滤镜并不是一个新鲜的话题,况且它对浏览器还挺挑剔,但是谁也不能否认CSS 滤镜的确是一个很有趣的小东西,短短一行代码就可以变化出各种各样的滤镜特效。我们特意精心整理了这个专题,为了照顾使用低版本浏览器的朋友,我们同时使用CSS滤镜代码实现效果和效果拷屏记录以及代码显示三种方式向您详细讲述CSS 滤镜。

CSS滤镜实际上是CSS一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本、以及其他一些对象,为页面添加一些丰富的变化。如果您有一些脚本语言的基础,能够把滤镜效果与SCRIPT小程序做一些结合,就可以拥有一个CSS FILTER+ SCRIPT建立的强大的动态交互文档工具。

请大家先看下面的例子,这里可没有用什么Photoshop之类的图象软件,只是用了一行短短的CSS滤镜代码,不信的话大家可以用右键看看它们的图片名字,都是相同的一张图片:

注:只有IE4.0/NC6.0以上的浏览器支持CSS滤镜效果,如果您的浏览器看不到上面的效果,请看下面的效果拷屏记录。(为了照顾使用低版本浏览器的朋友,我们将同时提供CSS滤镜代码实现效果和效果拷屏记录)

使用CSS滤镜的方法很简单,只要遵守下面的基本语法规则就行了:

filter:filtername(parameters)即 filter:滤镜名称(参数)

下面我们将详细讲述每种滤镜的使用方法和精彩效果,大家还可以研究一下,将他们组合起来,得出各种曼妙的效果。

滤镜效果

功能描述

Alpha

设置不同的透明度变化效果

Blur

建立模糊效果

DropShadow

建立一种偏移的影象轮廓,即投射阴影

FlipH

水平翻转

FlipV

垂直翻转

Glow

为对象的边界增加色彩光效

Gray

将图片以灰度形式显示

Invert

将色彩、饱和度以及亮度值完全反转,类似底片效果

Light

在一个对象上进行灯光投影

Mask

为一个对象建立彩色透明遮罩

Shadow

为对象建立轮廓的影效果

Wave

在X轴和Y轴方向利用正弦波打乱图片

Xray

只显示对象的轮廓

具体的应用有两种方法:

[url=http://soft.yesky.com/SoftChannel/72348990389092352/20011121/yl-011122-t-3.gif][/url]1、 先定义好CSS

,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可:

2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。

所谓的HTML控件元素就是它们在页面上定义了一个矩形空间,浏览器的窗口可以显示这些空间。下面列出HTML合法的控件,相信大家都熟悉它们的用法,在这里就不赘述了。细心的朋友可以看到我们文中所举的实例都是使用这种方法实现的。

BODY

BUTTON

DIV

IMG

INPUT

MARQUEE

SPAN

TABLE

TD

TEXTAREA

TFOOT

TH

THEAD

TR

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有