天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件频道 > 设计在线 > 设计在线教程专栏>技术文档>代码的魔术:CSS 滤镜之旅

代码的魔术:CSS 滤镜之旅

天极设计在线2001-11-21 15:23我要吐槽


光与影的重奏:在平面中表现立体

Flash 周边辅助软件集粹

flash 宝典

FLASH 5 ActionScript 全接触

FLASH 精彩实例跟我学



3D Studio Max 宝典

三维动画师之入门基础

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

2001.11.22 天极设计在线


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

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

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

正常图片
filter:invert 底片效果
style=filter:gray   灰度图

  注:
只有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 只显示对象的轮廓

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

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

作者:Shiny 整理责任编辑:Shiny)

请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
焦点热词