代码的魔术——CSS滤镜之旅
2005-03-01 20:54
513 查看
代码的魔术——CSS滤镜之旅
2001.11.22 天极设计在线
编者的话:CSS 滤镜并不是一个新鲜的话题,况且它对浏览器还挺挑剔,但是谁也不能否认CSS 滤镜的确是一个很有趣的小东西,短短一行代码就可以变化出各种各样的滤镜特效。我们特意精心整理了这个专题,为了照顾使用低版本浏览器的朋友,我们同时使用CSS滤镜代码实现效果和效果拷屏记录以及代码显示三种方式向您详细讲述CSS 滤镜。
CSS滤镜实际上是CSS一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本、以及其他一些对象,为页面添加一些丰富的变化。如果您有一些脚本语言的基础,能够把滤镜效果与SCRIPT小程序做一些结合,就可以拥有一个CSS FILTER+ SCRIPT建立的强大的动态交互文档工具。
请大家先看下面的例子,这里可没有用什么Photoshop之类的图象软件,只是用了一行短短的CSS滤镜代码,不信的话大家可以用右键看看它们的图片名字,都是相同的一张图片:
使用CSS滤镜的方法很简单,只要遵守下面的基本语法规则就行了:
filter:filtername(parameters) 即 filter:滤镜名称(参数)
下面我们将详细讲述每种滤镜的使用方法和精彩效果,大家还可以研究一下,将他们组合起来,得出各种曼妙的效果。
具体的应用有两种方法:
1、 先定义好CSS
,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可:
2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。
所谓的HTML控件元素就是它们在页面上定义了一个矩形空间,浏览器的窗口可以显示这些空间。下面列出HTML合法的控件,相信大家都熟悉它们的用法,在这里就不赘述了。细心的朋友可以看到我们文中所举的实例都是使用这种方法实现的。
2001.11.22 天极设计在线
编者的话:CSS 滤镜并不是一个新鲜的话题,况且它对浏览器还挺挑剔,但是谁也不能否认CSS 滤镜的确是一个很有趣的小东西,短短一行代码就可以变化出各种各样的滤镜特效。我们特意精心整理了这个专题,为了照顾使用低版本浏览器的朋友,我们同时使用CSS滤镜代码实现效果和效果拷屏记录以及代码显示三种方式向您详细讲述CSS 滤镜。
CSS滤镜实际上是CSS一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本、以及其他一些对象,为页面添加一些丰富的变化。如果您有一些脚本语言的基础,能够把滤镜效果与SCRIPT小程序做一些结合,就可以拥有一个CSS FILTER+ SCRIPT建立的强大的动态交互文档工具。
请大家先看下面的例子,这里可没有用什么Photoshop之类的图象软件,只是用了一行短短的CSS滤镜代码,不信的话大家可以用右键看看它们的图片名字,都是相同的一张图片:
注:只有IE4.0/NC6.0以上的浏览器支持CSS滤镜效果,如果您的浏览器看不到上面的效果,请看下面的效果拷屏记录。(为了照顾使用低版本浏览器的朋友,我们将同时提供CSS滤镜代码实现效果和效果拷屏记录) |
filter:filtername(parameters) 即 filter:滤镜名称(参数)
下面我们将详细讲述每种滤镜的使用方法和精彩效果,大家还可以研究一下,将他们组合起来,得出各种曼妙的效果。
[align=center]滤镜效果[/align] | [align=center]功能描述[/align] |
Alpha | 设置不同的透明度变化效果 |
Blur | 建立模糊效果 |
DropShadow | 建立一种偏移的影象轮廓,即投射阴影 |
FlipH | 水平翻转 |
FlipV | 垂直翻转 |
Glow | 为对象的边界增加色彩光效 |
Gray | 将图片以灰度形式显示 |
Invert | 将色彩、饱和度以及亮度值完全反转,类似底片效果 |
Light | 在一个对象上进行灯光投影 |
Mask | 为一个对象建立彩色透明遮罩 |
Shadow | 为对象建立轮廓的影效果 |
Wave | 在X轴和Y轴方向利用正弦波打乱图片 |
Xray | 只显示对象的轮廓 |
1、 先定义好CSS
,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可:
2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。
所谓的HTML控件元素就是它们在页面上定义了一个矩形空间,浏览器的窗口可以显示这些空间。下面列出HTML合法的控件,相信大家都熟悉它们的用法,在这里就不赘述了。细心的朋友可以看到我们文中所举的实例都是使用这种方法实现的。
[align=center]BODY[/align] | [align=center]BUTTON[/align] | [align=center]DIV[/align] | [align=center]IMG[/align] | [align=center]INPUT[/align] | [align=center]MARQUEE[/align] | [align=center]SPAN[/align] |
[align=center]TABLE[/align] | [align=center]TD[/align] | [align=center]TEXTAREA[/align] | [align=center]TFOOT[/align] | [align=center]TH[/align] | [align=center]THEAD[/align] | [align=center]TR[/align] |
相关文章推荐
- 代码的魔术——CSS滤镜之旅(转帖)
- 用css alpha 滤镜 实现input file 样式美化代码
- CSS 各种滤镜代码解释 用法案例
- CSS各种滤镜代码解释用法案例
- 用css alpha 滤镜 实现input file 样式美化代码
- 为玉树祈祷,网站灰黑色CSS哀悼滤镜代码
- css图片滤镜效果代码
- inut按钮hover时变化的css控制代码
- YAHOO 工程师CSS初始化代码
- CSS控制漂亮的网页打印效果示例代码
- CSS滤镜效果
- 很漂亮的蓝色经典CSS导航菜单代码
- CSS初始化代码
- html,css,js代码格式化,及其压缩
- 关于ie浏览器的css代码注释
- 通用的二级菜单代码(css+javascript)
- CSS中文说明及字体颜色代码
- css初始化代码 以及background的使用
- 【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
- css代码片段-tab的用法