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

原创 2005年03月01日 20:54:00
代码的魔术——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

CSS基本功先生——滤镜

一个非常简单的滤镜,却能实现非常大的作用,可谓是小个子有大智慧。

CSS+DIV网页样式与布局——滤镜

滤镜主要是用来实现图像的各种特殊效果。它在PhotoShop中有非常神奇的作用。CSS滤镜的标识符是“filter”,总体上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜可...

css部分滤镜效果代码

  • 2010年05月20日 23:33
  • 46KB
  • 下载

精通CSS.DIV网页样式与布局(八)——滤镜的使用

我们这次来说说滤镜的使用,我们首先看看滤镜的概述: CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。由于浏览器I...
  • yi_zz
  • yi_zz
  • 2012年10月02日 11:16
  • 7648

CSS技巧收集——毛玻璃效果(深入理解滤镜filter)

原文链接:http://www.cnblogs.com/ghost-xyx/p/5677168.html先上 demo 和 源码其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filte...
  • cometwo
  • cometwo
  • 2016年07月16日 23:55
  • 14519

ffmpeg 使用滤镜——代码实现

http://blog.csdn.net/dangxw_/article/details/48999109 版权声明:本文为博主原创文章,未经博主允许不得转载。 ...
  • STN_LCD
  • STN_LCD
  • 2017年07月05日 11:02
  • 234

photoshop图像滤镜——素描算法(含matlab代码)

二、photoshop图像滤镜——素描算法     素描的算法,网络上有多种,但是效果并不是特别理想。熟悉photoshop的朋友都知道,把彩色图片打造成素描的效果仅仅需要几步操作:1、去色...
  • wsfdl
  • wsfdl
  • 2012年05月28日 21:31
  • 12784

JavaFX文档(5)开始JavaFX之旅——3 使用CSS

声明:如需转载,请注明出处:http://blog.csdn.net/originer 原文出处:

Web之旅第四站——CSS(Cascading style Sheet) 层叠样式表

从宏观的角度:What,Why,How,Result对css的所有已内容进行归纳总结。注意点:在布局的时候,两个上下位置关系的DIV之间的距离不能用margin-top 直接加上margin-bord...

【Java学习之旅】——Java如何实现像c#的#region实现代码折叠

【前言】     最近小编在敲drp项目的时候,遇到一个小小的不舒服的地方,代码写的很多,但是很多的方法却不能很好的管理,不能像c#的#region对一个一个的方法进行折叠,这让自己很不舒服,所以经过...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:代码的魔术——CSS滤镜之旅
举报原因:
原因补充:

(最多只允许输入30个字)