css濾鏡在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

1、<p>　　CSS濾鏡在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用</p><p>　　摘要：介紹了CSS濾鏡的語(yǔ)法。對(duì)幾種常用CSS濾鏡的主要屬性進(jìn)行了分析，并給出相應(yīng)實(shí)例論述。CSS濾鏡可以像圖像軟件一樣處理頁(yè)面中的文字和圖像，使網(wǎng)頁(yè)變得更加生動(dòng)?？刂茷V鏡的參數(shù)來(lái)產(chǎn)生動(dòng)態(tài)效果，使網(wǎng)頁(yè)變得更加生動(dòng)。 </p><p>　　關(guān)鍵詞：Alpha Dropshadow Shadow </p>&

2、lt;p>　　一提起濾鏡，大家都會(huì)想起Adobe公司的Photoshop軟件，濾鏡在Photoshop中具有非常神奇的作用，一般都按照分類(lèi)放置在菜單中，使用時(shí)只需從該菜單中執(zhí)行這項(xiàng)命令即可達(dá)到美妙的效果。但是真正用起來(lái)卻很難做到恰到好處。因?yàn)镻hotoshop里的濾鏡除了平常的美術(shù)功底之外，通常需要同通道、圖層等聯(lián)合使用，需要用戶(hù)對(duì)濾鏡熟悉的操控，甚至需要具有很豐富的想象力。 </p><p>　　1 CS

3、S濾鏡的概念 </p><p>　　濾鏡（filter）是CSS技術(shù)的一種應(yīng)用，它可以用來(lái)改變圖形和文字的外觀，以增加圖形的視覺(jué)效果。濾鏡分為視覺(jué)濾鏡visualfilters和轉(zhuǎn)換濾鏡transitionfilters兩大類(lèi)。視覺(jué)濾鏡只可以達(dá)到靜態(tài)的特效效果，只需在網(wǎng)頁(yè)內(nèi)使用CSS的定義語(yǔ)法，即可將此濾鏡效果加到網(wǎng)頁(yè)內(nèi)。轉(zhuǎn)換濾鏡是用于兩個(gè)畫(huà)面進(jìn)行轉(zhuǎn)換時(shí)所使用的特效，將產(chǎn)生動(dòng)態(tài)效果，除了在網(wǎng)頁(yè)中利用CSS的定義語(yǔ)

4、法外，還必須配合script語(yǔ)言，及事件的概念，才能自如地使用轉(zhuǎn)換濾鏡，產(chǎn)生絢麗的效果。 </p><p><b>　　2 濾鏡的格式 </b></p><p>　　濾鏡不是一種軟件，只是CSS的一種擴(kuò)展功能，因此使用時(shí)需要在CSS樣式表里添加特定的參數(shù)，然后再對(duì)對(duì)象應(yīng)用設(shè)置好的CSS樣式，從而讓濾鏡效果得以實(shí)現(xiàn)。濾鏡的具體類(lèi)別很多，但是大部分格式是相同的。具體格式為

5、：filter：；濾鏡名稱(chēng)（參數(shù)1=，參數(shù)2=……） </p><p>　　3 濾鏡的具體應(yīng)用 </p><p>　　3.1 Alpha濾鏡 ①格式：filter：Alpha（Opacity=？，F(xiàn)inishOpacity=？，Style=？，StartX=？，StartY=？，F(xiàn)inishX=？，F(xiàn)i-nishY=？）。②作用：用來(lái)設(shè)置對(duì)象的透明度。③參數(shù)詳解：透明度程度、可選的參數(shù)、透

6、明區(qū)域的形狀特征、漸變透明效果的開(kāi)始坐標(biāo)、漸變透明效果的結(jié)束坐標(biāo)。④操作過(guò)程：在網(wǎng)頁(yè)中插入圖片，如圖1所示，用于效果對(duì)比；建立sty1的樣式，代碼如下： </p><p><b>　　■。 </b></p><p>　　代碼效果如圖2所示： </p><p><b>　　■ </b></p><p>

7、;<b>　　圖1 圖2 </b></p><p>　　3.2 Dropshadow濾鏡 ①格式：filter：DropShadow（Color=？，OffX=？，OffY=-？，Posit-ive=？）。②作用：用來(lái)添加陰影效果。③參數(shù)詳解：分別代表：指定陰影的顏色、相對(duì)于元素在水平方向偏移量、相對(duì)于元素在垂直方向偏移量、布爾值。④操作過(guò)程：建立做sty2的樣式，代碼如下：■。 </

8、p><p>　　代碼效果如圖3所示： </p><p><b>　　■ </b></p><p>　　3.3 Shadow濾鏡 ①格式：filter：Shadow（Color=？，Direct-ion=？）②作用：用來(lái)添加陰影效果。③參數(shù)詳解：指定陰影的顏色和設(shè)置投影的方向。④操作過(guò)程：建立sty3的樣式，代碼如下： </p><

9、;p><b>　　■。 </b></p><p>　　代碼效果如圖4所示。 </p><p>　　3.4 其余的各類(lèi)濾鏡 ①BlendTrans：圖像之間的淡入和淡出的效果。格式：BlendTrans（Duration=？）。參數(shù)代表淡入或淡出的時(shí)間。②Blru：建立模糊效果。格式：Blur（Add=？，Direction=？，Strength=？）。參數(shù)分別代

10、表：是否單方向模糊、設(shè)置模糊的方向、代表模糊的象素值。③Chroma：把指定的顏色設(shè)置為透明。格式：Chroma（Color=？）。參數(shù)代表透明的顏色。④FlipH：將元素水平反轉(zhuǎn)。⑤FlipV：將元素垂直反轉(zhuǎn)。⑥Glow：建立外發(fā)光效果。格式：Glow（Color=？，Strength=？）參數(shù)代表指定發(fā)光的顏色和代表光的強(qiáng)度。⑦Gray：去掉圖像的色彩，顯示為黑白圖象。⑧Invert：反轉(zhuǎn)圖像的顏色，產(chǎn)生類(lèi)似底片的效果。⑨Light

11、：放置光源的效果，可以用來(lái)模擬光源在物體上的投影效果。⑩.Mask：建立透明遮罩。格式：Mask（Color=？）。參數(shù)是對(duì)底色進(jìn)行設(shè)置?！鯮eveal Trans：建立切換效果。格式：Reveal Trans（Duration=？，Transition=？）。參數(shù)分別代表：代表切換時(shí)間、切換</p><p>　　ngth=？）。參數(shù)分別代表：是否顯示原對(duì)象、波動(dòng)的個(gè)數(shù)、波浪效果的光照強(qiáng)度、波浪的起始相角和波浪搖

12、擺的幅度?！鯴ray：顯現(xiàn)圖片的輪廓，X光片效果。 </p><p><b>　　4 結(jié)束語(yǔ) </b></p><p>　　濾鏡的使用大大減少了網(wǎng)頁(yè)設(shè)計(jì)的時(shí)間，增強(qiáng)了網(wǎng)頁(yè)的顯示效果，設(shè)計(jì)者可以通過(guò)濾鏡對(duì)網(wǎng)頁(yè)中的元素進(jìn)行精確化控制，從而達(dá)到滿(mǎn)意的效果。 </p><p><b>　　參考文獻(xiàn)： </b></p>

13、<p>　　[1]楊森香.網(wǎng)頁(yè)設(shè)計(jì)案例教程[M].北京出版社，2010. </p><p>　　[2]周文化，css濾鏡在網(wǎng)頁(yè)中的使用[J].常州輕工職業(yè)學(xué)院學(xué)報(bào)，1999（1）29-31. </p><p>　　[3]劉敏娜.探討XHTML設(shè)計(jì)標(biāo)準(zhǔn)下CSS+DIV布局技術(shù)[J].價(jià)值工程，2012（06）. </p><p>　　作者簡(jiǎn)介：劉曉榮（19