應(yīng)用軟件:Dreamweaver MX
操作難度:★★☆☆☆
我們常用的網(wǎng)頁(yè)制作工具Dreamweaver MX不僅可以制作網(wǎng)頁(yè),而且利用其中的CSS濾鏡我們還可以對(duì)文字或圖片進(jìn)行簡(jiǎn)單的特效處理。下面我們就通過(guò)幾個(gè)例子來(lái)看一看在Dreamweaver中是如何制作特效文字的。
光暈字
首先啟動(dòng)Dreamweaver,在新文檔中插入一個(gè)1×1的表格,邊框設(shè)置為0,然后在其中輸入需要修飾的文字。
單擊右面的浮動(dòng)面板中的“設(shè)計(jì)→CSS樣式”打開(kāi)這一浮動(dòng)面板。
面板右下角的四個(gè)按鈕分別是:添加、新建、編輯以及刪除CSS樣式。
注意:在Dreamweaver中,CSS濾鏡只能作用于有區(qū)域限制的對(duì)象,如表格、單元格、圖片等,而不能直接用于文字,所以我們要把所需要增加特效的文字事先放在表格中,然后對(duì)表格應(yīng)用CSS樣式,從而使文字產(chǎn)生特殊效果。
圖1 新建CSS樣式
單擊新建CSS樣式按鈕,彈出如圖1的對(duì)話(huà)框。
“類(lèi)型”項(xiàng)選擇“創(chuàng)建自定義樣式”,“定義在”選擇“僅對(duì)該文檔”,點(diǎn)確定后彈出CSS樣式定義對(duì)話(huà)框(如圖2),在類(lèi)型面板中我們可以定義字體、字號(hào)、顏色等內(nèi)容,本例中我們選擇字體為隸書(shū),大小50像素,顏色為白色。
圖2 定義CSS樣式
要產(chǎn)生文字特效,最重要的是在擴(kuò)展面板(如圖3)中的設(shè)置,在“視覺(jué)效果下”的過(guò)濾器中列出的就是所有的CSS濾鏡,選擇Glow濾鏡,它可以使文字產(chǎn)生邊緣發(fā)光的效果。Glow濾鏡的語(yǔ)法格式為:Glow(Color=?, Strength=?),里面有兩個(gè)參數(shù):Color決定光暈的顏色,可以用如ffffff的十六進(jìn)制代碼,或者用Red、Yellow等單詞表示;Strength表示發(fā)光強(qiáng)度,范圍從0到255。本例中我們?cè)O(shè)置顏色為紅色(Red),發(fā)光強(qiáng)度為8,然后確定。
圖3 設(shè)置好Glow濾鏡
下面我們將這個(gè)CSS樣式應(yīng)用到表格中。把光標(biāo)移到單元格中,在文檔窗
口左下角點(diǎn)擊標(biāo)簽選中單元格,然后單擊剛才在CSS樣式面板中新建的樣式,這時(shí)標(biāo)簽變?yōu)?,表明已?jīng)對(duì)單元格應(yīng)用了CSS樣式。我們?cè)谖臋n窗口中看不出變化,按F12鍵在IE中預(yù)覽,效果就出來(lái)了(如圖4)。
圖4 光暈字效果
怎么樣?不次于在Photoshop中的濾鏡效果吧。在網(wǎng)頁(yè)里放上幾個(gè)這樣的特效字會(huì)讓網(wǎng)頁(yè)美觀(guān)不少,而且我們也可以用PrintScreen鍵抓屏,然后在畫(huà)圖程序中粘貼保存使之成為單獨(dú)的圖片。
陰影字
有兩種CSS濾鏡能夠使文字產(chǎn)生陰影效果,分別是Drowshadow和Shadow,它們產(chǎn)生的效果略有所不同。
制作陰影字的操作步驟與制作光暈字的過(guò)程基本相同,只要在CSS樣式中重新選擇一種過(guò)濾器即可。
Drowshadow濾鏡的語(yǔ)法如下:DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 。
其中,Color表示投射陰影的顏色,用十六進(jìn)制數(shù)來(lái)表示;OffX、OffY分別代表陰影偏離文字位置的量,單位為像素;Positive為一個(gè)邏輯值,1代表為所有不透明元素建立陰影,0代表為所有透明元素建立可見(jiàn)陰影。
圖5 陰影字效果
例如把過(guò)濾器設(shè)置為DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1),產(chǎn)生的效果如圖5。
遮罩字
CSS濾鏡中還為我們提供了遮罩的功能,可以把文字部分處理成遮罩,如果在背景中使用合適的圖片,就能產(chǎn)生漂亮的鏤空文字效果。
文檔窗口中插入一個(gè)1×1的表格,單擊文檔窗口左下角的標(biāo)簽選中整個(gè)表格,在屬性檢查器(如圖6)的背景圖像中選擇一張合適的圖片,然后在單元格中輸入需要的文字。
圖6
接下來(lái)我們?yōu)閱卧裉砑覯ask濾鏡,步驟與前兩例類(lèi)似。在過(guò)濾器中選擇Mask(Color=?),這個(gè)參數(shù)決定遮罩的顏色,我們選擇用白色。
注意:本例中文字的顏色選擇并不重要,因?yàn)樵谧罱K效果中文字會(huì)被鏤空,顏色并不會(huì)顯示出來(lái)。
圖7 遮罩字效果友
設(shè)置完成后將這個(gè)CSS樣式應(yīng)用到單元格,然后按下F12鍵就可以看到效果了(如圖7)。
注意:背景圖片是為整個(gè)表格添加的,對(duì)應(yīng)<table>標(biāo)簽,而CSS樣式是對(duì)單元格添加的,是<td>標(biāo)簽,千萬(wàn)不要搞錯(cuò)。
動(dòng)感字
制作動(dòng)感字我們要用到Blur濾鏡,作用是產(chǎn)生模糊效果,它的語(yǔ)法格式為Blur(Add=?, Direction=?, Strength=?)。Add參數(shù)是一個(gè)布爾值,一般來(lái)說(shuō),當(dāng)濾鏡用于圖片的時(shí)候取0,用于文字的時(shí)候取1;Direction代表模糊方向,單位是角度;Strength代表模糊移動(dòng)值,單位為像素。比如我們定義Blur(Add=1, Direction=90, Strength=150),在預(yù)覽中就可以看到如圖8的效果。
圖8 動(dòng)感字效果友
其實(shí),CSS中很多濾鏡也能夠用于圖片的修飾,如Blur濾鏡就可以使圖片產(chǎn)生模糊效果。如果我們對(duì)這些濾鏡都能夠熟練應(yīng)用,那么有時(shí)在沒(méi)有專(zhuān)業(yè)圖像處理軟件的情況下,也能夠制作出相當(dāng)不錯(cuò)的圖片效果來(lái)。