|
作者：Taylor 目前最新的浏览器可以为你设计的网页提供非常令人满意的效果。你可以利用串接样式表(CSS）进行图文设计，用CSS定位控制页面布局。你还可以通过文件目标模块建立互动网页，使其能随时发生变化，及响应读者输入的指令。所有这些功能将使你充分领略互动媒体的神奇魅力。 现在我们谈一下CSS图象滤镜。 如果你使用过图形软件的话，视觉滤镜这个概念你一定不会感到陌生。你可以选择一个图形，让计算机对其进行模糊过滤，或者将有些文字或图象反转处理。要想实现这些技巧，你得将需要变化的内容以位图形式输入你的图象处理软件，应用相应的过滤器，然后及其以GIF或JPEG格式发布。 但是生成文字的图象格式会破坏原有文字的存储格式并且会延长下载的时间。生命的一分一秒被消耗在下载的漫长等待之中实在是一种残忍的折磨和享受。但是你需要为你的标题添加一点漂亮的蓝色下落阴影，并且在其四周环绕以红色的光晕。好吧，我们就给它加上一个漂亮的修饰。 有时候当图象下载到客户端时你需要对图象做一些变化，比如加一个移动模糊让其“神经质”地滑过屏幕。不要怕，CSS图象过滤器将帮助你实现你的愿望（但是现在只能在微软IE 4.0上实现这些功能）。 我以一个叫Nadav的照片为例为说明以下CSS图象滤镜的功能。请注意观察同样一幅照片在应用器不同的过滤器时会发生何种变化，以及他所说的话回发生何种相同的变化。 虽然Alpha通道不能完全实现PNG功能，但它确实能使图象和文字呈现半透明效果，甚至可以实现渐变半透明效果。
不透明度（opacity）是唯一需要提供的数值。起始不透明度（starting opacity, 0到100之间的一个数值，100完全不透明）通常是为过滤器统一设定的不透明度水平。终止不透明度（finishOpacity）用于使用设定了另外一个数值的渐变效果时。StartX和StartY是渐变效果起始处（为一个不透明度值）被过滤目标的坐标，而FinishX和FinishY是为终止处的坐标（FinishOpacity值）。风格（style）是渐变所要使用的类型（采用0至3之间的一个数值，0代表均匀渐变，1代表线性渐变，2代表放射渐变，3代表直角渐变）。对于背景不固定的图象，这种效果最为明显。 Example:
在PR2中有一个小故障，所以要使滤镜用于文字，你必须在容器（container）上设定宽度（width）和高度（height）。 除了让你的读者误以为自己需要重新配一幅眼镜之外，移动模糊还可以模拟运动中的物体。我们的有些设计师认为即使物体以一种“神经质”的方式运动。也应该将模拟的运动调整得平滑一些。
Add用来确定是否在运动模糊中使用原有目标（其值为0和1，0代表“否”，1代表“是”）。对于图象，使用0效果更好；而对于文字，则应使用1。Direction是模糊移动的角度，0至360度。Strength是模糊移动的距离。 Example:
色度使你选定的颜色消失，很象在GIF中设定透明象素。色度也适用于JPEG和PNG格式及文字。（如果你在文字上应用色度工具但未在上面设定其它滤镜，你将看不到任何东西）。
这里只设定一个值：即你计划让其消失的颜色。设定值采用Hex格式（＃PRGGBB）。 Example:
使用这个滤镜可以应用样式表时避免不必要的结构重复。人们在使用样式表时使用的一个技巧之一是将某一句话写两遍，然后将其合二为一，使其看起来有一种立体的阴影效果。但是有些主张简洁设计风格的人指出，将一句话写两三遍，对于使用看不到这些效果的浏览器的人来说则显得莫名其妙。
Color是下落阴影的颜色，永远用Hex格式表达。OffX和OffY是下落阴影的象素值。Positive是一个布尔值（0或1）；0指透明象素为阴影；1指给不透明象素生成阴影。 Example: 两种对称变换滤镜（FlipH和FlipV）都不需要设定任何参数。FlipH从水平角度过滤，而FlipV从垂直角度过滤。
Example
6、光晕 光晕将目标的可视象素周围用作者选定的颜色形成渐变放射的效果。渐变放射的距离也由作者选定。
Example
7、灰度 灰度也不需要设定参数。它去除目标的所有色彩，将其以灰度级别显示。
Example
8、反转 反转滤镜也不需要设定参数，它将图象的亮度和色彩反转显示。
Example
该滤镜将可看见的象素遮蔽，将看不见的象素以指定的颜色显示。
Example:
10、阴影 阴影是一种介于光晕和下落阴影之间的一种滤镜。它的应用类似下落阴影，但它的着色方式不象下落阴影那样采用固定的颜色，它的着色类似光晕的，或反混叠（anti-aliased）下落阴影的效果。但是它不能象对下落阴影和光晕那样采取非常精细的控制。
Example:
11、波形 波形滤镜能造成一种强烈的变形幻觉，它对过滤目标生成正弦波变形，同相应语言应用于Tandem能产生最佳的动画效果。
Add是一个布尔表达式，用来决定是否将原始图象混合入最后的效果。Freq（频率）决定显示效果中应出现多少波形。Light strength影响波形边缘的深浅。Phrase改变波形的形状，取值在0到360之间。Strength决定振幅。该滤镜只能水平添加。 Example:
12、X光效果 X光效果滤镜也不需要设定参数，是一种很少见的滤镜。它想灰色滤镜一样去除图象的所有颜色信息，然后将其反转（黑白象素除外）。对其效果一般没有确切把握。 Example:
13、链接滤镜 现在，尽管使用单一的一种滤镜你就可以生成很好的效果，但是如果你将几种滤镜链接到一起，你将会得到一种非常非常有趣的效果，让我们对一个目标添加色度滤镜，再添加遮蔽滤镜，然后再添加一次遮蔽滤镜，看看它的效果如何： Example:
你可以对其链接无穷无尽的滤镜。
还有几种滤镜在本文中我没有谈到。其中最值得注意的是光滤镜。它相当于在你的页面上挂一个舞台光栅。它的光学原理比较复杂，而且还需要一种编写语言编的调 我还听说还有一些尚未正式成文的滤镜将被包括在IE 4.0的最终发行版内。由于目前没有其文字介绍，所以我也不可能向你们正确地介绍这类滤镜。 滤镜目前还未被W3C正式承认。滤镜只是微软IE浏览器德文组成部分，不能由于Netscape浏览器。制定有关标准的组织正在就此进行讨论，但尚未达成最后定论。在我看来，滤镜是一致非常有趣而且是制作精彩的视觉效果必不可少的一部分。滤镜能节省带宽，而且是你能在制作奇妙的视觉设计时使用文字格式，而不必先制作庞大的文字位图以取得相同的效果。 但由于这些功能尚未成为HTML的正式组成部分，所以并不是所以的浏览器都能看到这些特色。有些时候，你必须考虑以传统的方式制作相同的效果，当然，你不得不继续将庞大的GIF文件塞到网页之中。
|
