代码的魔术——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网页样式与布局(八)——滤镜的使用

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

css部分滤镜效果代码

  • 2010-05-20 23:33
  • 46KB
  • 下载

精通css滤镜——css样式

  • 2009-03-03 18:59
  • 188KB
  • 下载

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

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

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

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

Java探索之旅(2)——GUI输入输出与代码的规范性

1.定名常量关键字final,类似C++宏定义,一般用大写

《代码整洁之道》之旅(2)——第2章:有意义的命名

备注:文章中出现的章节序号均与书本一致,其中有些章节没有记录点就直接跳过了。第2章 有意义的命名2.2 名副其实   以下举个例子:      上面带来的问题不在于代码的简洁度,而是在于代码的模...

JAVA之旅(五)——this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块

JAVA之旅(五)——this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名...

JAVA之旅(十三)——线程的安全性,synchronized关键字,多线程同步代码块,同步函数,同步函数的锁是this

JAVA之旅(十三)——线程的安全性, 我们继续上个篇幅接着讲线程的知识点 一.线程的安全性 当我们开启四个窗口(线程)把票陆陆续续的卖完了之后,我们要反思一下,这里面有没有安全隐患呢?在实际...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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