巧用CSS的Glow濾鏡

2022-01-26 13:17:55 字數 1159 閱讀 1748

請看下面的效果圖:

圖1 「glow」濾鏡載入到文字上的效果

上面這種效果不錯吧?!製作「glow」濾鏡與其它css濾鏡在方法上沒有什麼區別,故不再重複。「glow」濾鏡可以直接載入到文字上,所以使用非常方便。上面這種效果的濾鏡**是:glow1(color=#0000ff, strength=7),你對「color"和「strength」設定不同的值,將得到不同的效果,你可以動手試試。

二、給加漸變外框

「glow」濾鏡載入到一般無效,但若是把放到**中,再給**的< td >加上「glow」濾鏡,卻能使產生乙個漸變顏色的邊框,請看下面的效果:

圖2 在< td >上載入「glow」濾鏡的效果

這裡使用的「glow」濾鏡**是:glow1(color=#0000ff, strength=7)。但請你在具體製作時注意:為了加強效果,可以加上背景色,但你只能給**加背景色,而一旦你給單元格加上背景色,「glow」濾鏡就無效了。

三、為透明背景的增色

「glow」濾鏡載入到一般上無效,但載入到有透明背景的gif上卻能產生一種光暈效果,請看下面的效果圖:

圖3 「glow」濾鏡載入到透明背景上的效果

在透明的gif 上可以直接載入「glow」濾鏡,也就是用滑鼠點選一下,然後,點選快速啟動欄上的css圖示,在對話方塊中選擇乙個「glow」濾鏡即可。本例的「glow」濾鏡**是glow1(color=#ccff99, strength=7)。

「glow」濾鏡的引數不多,使用也就比較簡單,在具體應用時關鍵的問題是光芒顏色的選擇,原則是與整個頁面色彩要協調。我們再來看看在上例中再給< td >載入乙個「glow」濾鏡,**為glow2(color=#0000ff, strength=7),將獲得如下圖所示的效果:

圖4 兩次載入濾鏡的效果

這種效果有點酷吧?!此時你在網頁的源**< head >與< /head >可看到這樣一些**:

< style type="text/css" >

< !--

.glow1

.glow2

-- >

< /style >

而在< td >的**是這樣的:< td class="glow2 glow1" > 。這就給我們乙個啟示,多次載入「glow」濾鏡可產生一些奇特的效果,如製作發生日蝕時太陽的,火焰文字效果等等,這完全取決於你的創意。

CSS濾鏡的應用 Glow

語法 filter progid dximagetransform.microsoft.glow enabled benabled,color scolor,strength idistance 屬性 enabled 可選項。布林值 boolean 設定或檢索濾鏡是否啟用。true falsetru...

巧用CSS的alpha濾鏡

把 alpha 濾鏡載入到文字所在的 td 上,能產生一些奇妙的效果,請看下圖 圖1圖2 圖3上面的三種效果除 style 引數不同外,其它引數均相同。圖1的 是 alpha opacity 10,finishopacity 90,style 1,startx 0,starty 0,finishx ...

CSS的濾鏡效果 1

能 濾鏡.濾鏡可以針對圖形或者文本來增添一些效果.如果在搭配之前所寫的定位以及文字的性質.可以在不使用圖檔的情況下.讓網頁有很棒的效果,而且瀏覽又快速.css的濾鏡大概有14種.較常以套用在 等卷標上 先介紹幾種濾鏡 alpha 濾鏡 設定性質 opacity 透明度 開始 0 100 finish...