| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS擴展濾鏡屬性及語法

來源:互聯網  2008-08-09 06:57:28  評論

CSS濾鏡:

1.Alpha濾鏡

語法:

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

代碼:

<font style="font-size:30pt;filter:alpha(opacity=100,style=3);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

從效果中我們可以看出,Alpha濾鏡使對象呈漸變透明的效果,其效果是由腳本中的filter:alpha(opacity=100,style=3)來決定的。其中:

opacity屬性:設置透明度,取值0至100之間的任意數值,100表示完全不透明; style屬性:設置漸變風格,0表示均勻漸變,1表示線性漸變,2表示放射漸變,3表示直角漸變。

而width:100%則表示參與漸變的對象的寬度,通常都設置爲100%。

2. Blur濾鏡

語法:

Blur(Add=?, Direction=?, Strength=?)

Motion Blur濾鏡表現的是一種模糊效果。其ADD屬性是用來確定是否在運動模糊中使用原有目標,其值爲0和1,0表示「否」,用于文字,1表示「是」,用于圖像;Direction屬性是模糊移動的角度,其值爲0至360度;Strength屬性是模糊移動的距離。

代碼:

<font style="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

3.Chroma 濾鏡

語法:

{filter:chroma(color=color)}

使用」Chroma"屬性可以設置一個對象中指定的顔色爲透明色,參數COLOR即要透明的顔色。

4.Drop Shadow濾鏡

語法:

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Drop Shadow濾鏡主要産生重疊效果。其屬性爲:

color屬性:設置影子文本的顔色;

offX和offY屬性:影子文本下落的位移值;

Positive屬性:指定透明象素陰影,布爾型,0爲是,1爲否。

代碼:

<font style="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

5.Flip濾鏡

Flip濾濾鏡主要是産生兩種變換效果,即上下變換和左右變換。FlipV産生上下變換,FlipH産生左右變換。

代碼:

<font style="font-size:30pt;filter:flipv(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

<p align=right><font style="font-size:30pt;filter:fliph(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font></p>

6.Glow濾鏡

語法:

Glow(Color=?, Strength=?)

Glow濾鏡生成一種光暈效果。屬性:

color屬性:光暈顔色;strength:光暈的厚度。

代碼:

<font style="font-size:30pt;filter:glow(color=gray,strength=4);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

7.Light 濾鏡

這個屬性模擬光源的投射效果。一旦爲對象定義了「LIGHT"濾鏡屬性,那麽就可以調用它的「方法(Method)"來設置或者改變屬性。「LIGHT"可用的方法有:

·AddAmbient 加入包圍的光源

·AddCone 加入錐形光源

·AddPoint 加入點光源

·Changcolor 改變光的顔色

·Changstrength 改變光源的強度

·Clear 清除所有的光源

·MoveLight 移動光源

可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顔色、亮度等屬性。如果動態的設置光源,可能回産生一些意想不到的效果。

8.Shadow濾鏡

語法:

Shadow(Color=?, Direction=?)

與Drop Shadow的影子特性不同,Shadow濾鏡産生一種陰影效果,它的屬性比較簡單:

color屬性:陰影顔色;

direction屬性:陰影角度,值取0至360度。

代碼:

<font style="font-size:30pt;filter:shadow(color=black,direction=180);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

9.Wave濾鏡

語法:

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

此濾鏡對過濾對象生成正弦波變形,造成一種變幻效果。內嵌屬性:

add屬性:布爾型,0或1,0表示將原始對象加入最後效果中,1則反之;

freq屬性:決定顯示的頻率,即應出現多少個波形;

phrase屬性:決定波形的形狀,值取0至360之間;

strength屬性:決定波形的振幅。

代碼:

<font style="font-size:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

10.Gray ,Invert,Xray 濾鏡

語法:

{filter:gray} ,{filter:invert},{filter:xray}

Gray濾鏡是把一張圖片變成灰度圖;Invert濾鏡是把對象的可視化屬性全部翻轉,包括色彩、飽和度、和亮度值;Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮,也就是所謂的「X」光片。

代碼:

提示:CSS濾鏡還經常用來修飾圖像。比如用Flip濾鏡,就可以使圖像倒過來顯示。最後請注意:要使用CSS濾鏡,只有在HTML編輯模式下編輯發布才有效果。

CSS濾鏡: 1.Alpha濾鏡 語法: Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 代碼: <font style="font-size:30pt;filter:alpha(opacity=100,style=3);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font> 從效果中我們可以看出,Alpha濾鏡使對象呈漸變透明的效果,其效果是由腳本中的filter:alpha(opacity=100,style=3)來決定的。其中: opacity屬性:設置透明度,取值0至100之間的任意數值,100表示完全不透明; style屬性:設置漸變風格,0表示均勻漸變,1表示線性漸變,2表示放射漸變,3表示直角漸變。 而width:100%則表示參與漸變的對象的寬度,通常都設置爲100%。 2. Blur濾鏡 語法: Blur(Add=?, Direction=?, Strength=?) Motion Blur濾鏡表現的是一種模糊效果。其ADD屬性是用來確定是否在運動模糊中使用原有目標,其值爲0和1,0表示「否」,用于文字,1表示「是」,用于圖像;Direction屬性是模糊移動的角度,其值爲0至360度;Strength屬性是模糊移動的距離。 代碼: <font style="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font> 3.Chroma 濾鏡 語法: {filter:chroma(color=color)} 使用」Chroma"屬性可以設置一個對象中指定的顔色爲透明色,參數COLOR即要透明的顔色。 4.Drop Shadow濾鏡 語法: DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Drop Shadow濾鏡主要産生重疊效果。其屬性爲: color屬性:設置影子文本的顔色; offX和offY屬性:影子文本下落的位移值; Positive屬性:指定透明象素陰影,布爾型,0爲是,1爲否。 代碼: <font style="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font> 5.Flip濾鏡 Flip濾濾鏡主要是産生兩種變換效果,即上下變換和左右變換。FlipV産生上下變換,FlipH産生左右變換。 代碼: <font style="font-size:30pt;filter:flipv(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font> <p align=right><font style="font-size:30pt;filter:fliph(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font></p> 6.Glow濾鏡 語法: Glow(Color=?, Strength=?) Glow濾鏡生成一種光暈效果。屬性: color屬性:光暈顔色;strength:光暈的厚度。 代碼: <font style="font-size:30pt;filter:glow(color=gray,strength=4);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font> 7.Light 濾鏡 這個屬性模擬光源的投射效果。一旦爲對象定義了「LIGHT"濾鏡屬性,那麽就可以調用它的「方法(Method)"來設置或者改變屬性。「LIGHT"可用的方法有: ·AddAmbient 加入包圍的光源 ·AddCone 加入錐形光源 ·AddPoint 加入點光源 ·Changcolor 改變光的顔色 ·Changstrength 改變光源的強度 ·Clear 清除所有的光源 ·MoveLight 移動光源 可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顔色、亮度等屬性。如果動態的設置光源,可能回産生一些意想不到的效果。 8.Shadow濾鏡 語法: Shadow(Color=?, Direction=?) 與Drop Shadow的影子特性不同,Shadow濾鏡産生一種陰影效果,它的屬性比較簡單: color屬性:陰影顔色; direction屬性:陰影角度,值取0至360度。 代碼: <font style="font-size:30pt;filter:shadow(color=black,direction=180);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font> 9.Wave濾鏡 語法: Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) 此濾鏡對過濾對象生成正弦波變形,造成一種變幻效果。內嵌屬性: add屬性:布爾型,0或1,0表示將原始對象加入最後效果中,1則反之; freq屬性:決定顯示的頻率,即應出現多少個波形; phrase屬性:決定波形的形狀,值取0至360之間; strength屬性:決定波形的振幅。 代碼: <font style="font-size:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font> 10.Gray ,Invert,Xray 濾鏡 語法: {filter:gray} ,{filter:invert},{filter:xray} Gray濾鏡是把一張圖片變成灰度圖;Invert濾鏡是把對象的可視化屬性全部翻轉,包括色彩、飽和度、和亮度值;Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮,也就是所謂的「X」光片。 代碼: 提示:CSS濾鏡還經常用來修飾圖像。比如用Flip濾鏡,就可以使圖像倒過來顯示。最後請注意:要使用CSS濾鏡,只有在HTML編輯模式下編輯發布才有效果。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有