DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS圖象濾鏡之實用版
CSS圖象濾鏡之實用版
編輯:CSS詳解     
.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)是唯一需要提供的數值。起始不透明度startingopacity, 0到100之間的一個數值,100完全不透明)通常是為過濾器統一設定的不透明度水平。終止不透明度(finishOpacity)用於使用設定了另外一個數值的漸變效果時。StartX和StartY是漸變效果起始處(為一個不透明度值)被過濾目標的坐標,而FinishX和FinishY是為終止處的坐標(FinishOpacity值)。風格(style)是漸變所要使用的類型(采用0至3之間的一個數值,0代表均勻漸變,1代表線性漸變,2代表放射漸變,3代表直角漸變)。對於背景不固定的圖象,這種效果最為明顯。

  在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是模糊移動的距離。

  3.色度

  色度使你選定的顏色消失,很象在GIF中設定透明象素。色度也適用於JPEG和PNG格式及文字。(如果你在文字上應用色度工具但未在上面設定其它濾鏡,你將看不到任何東西)。

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

  這裡只設定一個值:即你計劃讓其消失的顏色。設定值采用Hex格式(#PRGGBB)。

  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指給不透明象素生成陰影。

  5.對稱變換

  兩種對稱變換濾鏡(FlipH和FlipV)都不需要設定任何參數。FlipH從水平角度過濾,而FlipV從垂直角度過濾。

  Filter: FlipH 或者 Filter: FlipV

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved