個人資料
正文

用CSS濾鏡修飾文字 --石頭弟弟

(2010-09-13 07:07:52) 下一個


CSS是Cascadin Style Sheets的簡稱,中文意思是“串聯式排版樣式”,也稱“串接樣式表”。它是統一HTML標準的“W3C”的工業合作組織於1996年5月製定的第一個排版樣式標準,是對HTML功能的補充。CSS並非一種程序設計語言,它隻是一種用於頁麵設計的、由設計者提供的手段,其主要功能是通過對HTML標記進行設定,對網頁中的對象進行有效控製,使網頁能夠按照設計者的意願來顯示。
本文將介紹幾個CSS濾鏡(用來修飾文本),以此向大家展示CSS的強大功能。讀者將在閱讀代碼和觀賞文本特效中為CSS所製作出的文字特效而心動不已。請記住:CSS濾鏡隻不過是CSS眾多的功能之一,可謂冰山一角而已,更多的功能請查閱有關CSS教程。

一、Alpha濾鏡
請先觀察以下效果:
我愛想唱就唱!
代碼:<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>我愛想唱就唱!</B></FONT>
從效果中我們可以看出,Alpha濾鏡使對象呈漸變透明的效果,其效果是由腳本中的filter:alpha(opacity=100,style=3)來決定的。其中:
opacity屬性:設置透明度,取值0至100之間的任意數值,100表示完全不透明;style屬性:設置漸變風格,0表示均勻漸變,1表示線性漸變,2表示放射漸變,3表示直角漸變。
而width:100%則表示參與漸變的對象的寬度,通常都設置為100%。

二、Motion Blur濾鏡
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>我愛想唱就唱!</B></FONT>

三、Drop Shadow濾鏡
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>我愛想唱就唱!</B></FONT>

四、Shadow濾鏡
與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>我愛想唱就唱!</B></FONT>

五、Wave濾鏡
此濾鏡對過濾對象生成正弦波變形,造成一種變幻效果。內嵌屬性:
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>我愛想唱就唱!</B></FONT>
六、Glow濾鏡

Glow濾鏡生成一種光暈效果。屬性:
color屬性:光暈顏色;strength:光暈的厚度。
實例代碼與效果:
我愛想唱就唱!
代碼:
<FONT style="FONT-SIZE:30pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>我愛想唱就唱!</B></FONT>

七、Flip濾鏡
Flip濾濾鏡主要是產生兩種變換效果,即上下變換和左右變換。FlipV產生上下變換,FlipH產生左右變換。
我愛想唱就唱!<FONT style="FONT-SIZE:30pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:華文行楷"><B>我愛想唱就唱!</B></FONT> [打印]  
[ 打印 ]
閱讀 ()評論 (0)
評論
目前還沒有任何評論
登錄後才可評論.