CSS图象滤镜(上) [转载]

目前最新的浏览器可以为你设计的网页提供非常令人满意的效果。你可以利用串接样式表(CSS）进行图文设计，用CSS定位控制页面布局。你还可以通过文件目标模块建立互动网页，使其能随时发生变化，及响应读者输入的指令。所有这些功能将使你充分领略互动媒体的神奇魅力。

    如果你使用过图形软件的话，视觉滤镜这个概念你一定不会感到陌生。你可以选择一个图形，让计算机对其进行模糊过滤，或者将有些文字或图象反转处理。要想实现这些技巧，你得将需要变化的内容以位图形式输入你的图象处理软件，应用相应的过滤器，然后及其以GIF或JPEG格式发布。

    但是生成文字的图象格式会破坏原有文字的存储格式并且会延长下载的时间。生命的一分一秒被消耗在下载的漫长等待之中实在是一种残忍的折磨和享受。但是你需要为你的标题添加一点漂亮的蓝色下落阴影，并且在其四周环绕以红色的光晕。好吧，我们就给它加上一个漂亮的修饰。

    有时候当图象下载到客户端时你需要对图象做一些变化，比如加一个移动模糊让其“神经质”地滑过屏幕。不要怕，CSS图象过滤器将帮助你实现你的愿望（但是现在只能在微软IE 4.0上实现这些功能）。

    我以一个叫Nadav的照片为例为说明以下CSS图象滤镜的功能。请注意观察同样一幅照片在应用器不同的过滤器时会发生何种变化，以及他所说的话回发生何种相同的变化。

1、 Alpha 通道

    虽然Alpha通道不能完全实现PNG功能，但它确实能使图象和文字呈现半透明效果，甚至可以实现渐变半透明效果。

filter: Alpha(Opacity=starting opacity level,
FinishOpacity=finish opacity level,
Style=gradient style,startX=gradient start X position,
FinishX=gradient finish X position,
FinishY=Gradent finish Y Position)

    不透明度（opacity）是唯一需要提供的数值。起始不透明度（starting opacity, 0到100之间的一个数值，100完全不透明）通常是为过滤器统一设定的不透明度水平。终止不透明度（finishOpacity）用于使用设定了另外一个数值的渐变效果时。StartX和StartY是渐变效果起始处（为一个不透明度值）被过滤目标的坐标，而FinishX和FinishY是为终止处的坐标（FinishOpacity值）。风格（style）是渐变所要使用的类型（采用0至3之间的一个数值，0代表均匀渐变，1代表线性渐变，2代表放射渐变，3代表直角渐变）。对于背景不固定的图象，这种效果最为明显。

Example:

    在PR2中有一个小故障，所以要使滤镜用于文字，你必须在容器（container）上设定宽度（width）和高度（height）。

2、移动模糊

    除了让你的读者误以为自己需要重新配一幅眼镜之外，移动模糊还可以模拟运动中的物体。我们的有些设计师认为即使物体以一种“神经质”的方式运动。也应该将模拟的运动调整得平滑一些。

Filter: Blur(Add=ass original image,
Direction=360-degree direction,
Strength=strength of blur)

    Add用来确定是否在运动模糊中使用原有目标（其值为0和1，0代表“否”，1代表“是”）。对于图象，使用0效果更好；而对于文字，则应使用1。Direction是模糊移动的角度，0至360度。Strength是模糊移动的距离。

Example:

3、色度

    色度使你选定的颜色消失，很象在GIF中设定透明象素。色度也适用于JPEG和PNG格式及文字。（如果你在文字上应用色度工具但未在上面设定其它滤镜，你将看不到任何东西）。

Filter: Chroma(Color=Hexadecimal color that will disappear)

这里只设定一个值：即你计划让其消失的颜色。设定值采用Hex格式（＃PRGGBB）。

Example:

4、下落阴影

    使用这个滤镜可以应用样式表时避免不必要的结构重复。人们在使用样式表时使用的一个技巧之一是将某一句话写两遍，然后将其合二为一，使其看起来有一种立体的阴影效果。但是有些主张简洁设计风格的人指出，将一句话写两三遍，对于使用看不到这些效果的浏览器的人来说则显得莫名其妙。

Filter: DropShadow9color=The color of the drop shadow, OffX=How many pixels Horizontally, OffY=How many pixels Vertically, Positive=What gets shadows, visible of invisible pixels)

    Color是下落阴影的颜色，永远用Hex格式表达。OffX和OffY是下落阴影的象素值。Positive是一个布尔值（0或1）；0指透明象素为阴影；1指给不透明象素生成阴影。

Example:

　

5、对称变换

    两种对称变换滤镜（FlipH和FlipV）都不需要设定任何参数。FlipH从水平角度过滤，而FlipV从垂直角度过滤。

Filter: FlipH 或者 Filter: FlipV

Example