建站
咨詢
售后
建站咨詢
新聞中心
最基本的幾種CSS文字濾鏡效果
table?border=1?style="border-style:?solid;?border-width:?1;font-size=12px"?width="520"
在扶綏等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,全網(wǎng)整合營銷推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,扶綏網(wǎng)站建設(shè)費(fèi)用合理。
tr
td?width="510"
span?style="font-size:30pt;display:block;
text-align:center;color:blue;
filter:glow(color=red,strength=10);height:1"一路陽光??/span/td
/tr
tr
td?width="510"
span?style="font-size:30pt;display:block;?
text-align:center;color:darkblue;?
filter:blur(add=t,direction=135,strength=10);height:1"一路陽光/span/td
/tr
tr
td?width="510"
div?style="color:red;font-size:25pt;height:1;display:block;?
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)"?
p?align="center"?一路陽光/div/td
/tr
tr
td?width="510"
div?style="height:1;width:100%;?
font-family:impact;font-size:30pt;color:navy;display:block;?
filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"?
p?align="center"?一路陽光/div/td
/tr
tr
td?width="510"
div?style="height:1;width:100%;
font-family:impact;font-size:30pt;color:navy;display:block;
filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)"?
p?align="center"?一路陽光/div/td
/tr
tr
td?width="510"
span?style="font-size:30pt;display:block;
text-align:center;color:darkblue;
filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);
height:1"一路陽光/span/td
/tr
tr
td?width="510"
span?style="font-size:30pt;display:block;
text-align:center;color:darkblue;
filter:shadow(color=blue);height:1"一路陽光/span/td
/tr
tr
td?width="510"
div?align="center"?style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=1);"一路陽光/div/td
/tr
tr
td?width="510"
div?align="center"?style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=0);"一路陽光/div/td
/tr
tr
td?width="510"
div?style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5);
height:1;font-size:20pt;font-family:impact;background-color:blue"?
p?align="center"SUNNY/div/td
/tr
tr
td?width="510"
div?style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);
height:1;font-family:impact;font-size:20pt;background-color:blue"?
p?align="center"SUNNY/div/td
/tr
tr?
td?style="FILTER:?
mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)"
align="center"font?color="blue"?
size="6"b一路陽光/b/font/td
/tr
tr?
td?style="FILTER:?
alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)"
align="center"font?color="blue"?
size="6"b一路陽光/b/font/td
/tr
tr?
td?style="FILTER:?
mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)"
align="center"font??color="blue"?
size="6"b一路陽光/b/font/td
/tr
tr?
td?style="FILTER:?
glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)"?
align="center"font??color=#E1E4EC?
size=6b一路陽光/b/font/td
/tr
tr?
td?style="FILTER:?
mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)"
align="center"font??
color=#8C96B5?size=6b一路陽光/b/font/td
/tr
tr?
td?style="FILTER:?
glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)"?align="center"
height=54font?color=#8C96B5?
size=6b一路陽光/b/font/td
/tr
tr
tdspan?style="position:absolute;font-size:30pt;color=blue;filter:fliph"一路陽光/span/td
/tr
tr
tdspan?style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv"一路陽光/span/td
/tr
/table
table?align=center?background=""?border=0
tr?
td?style="FILTER:?glow(strength=4)mask(color=#E1E4EC)"font?
size="7"?b一路陽光/b/font/td
/tr
/table
Dreamweaver里的CSS樣式表里的擴(kuò)展選項里面的濾鏡
1、制作模糊文字效果
1、新建05.html的文件插入一個1行1列的表格，邊框和邊距全部設(shè)置為0。然后在表格中輸入要修飾的文字。
2、打開CSS樣式面板，創(chuàng)建一個CSS樣式，在彈出的“新建樣式對話框”做如下設(shè)置。
3、設(shè)置完成后，單擊“確定”按鈕彈出“CSS樣式定義”對話框，在類型設(shè)置區(qū)域中設(shè)置：大小：60，字體：黑體，粗細(xì)：粗，顏色：＃FF9900。
4、要產(chǎn)生文字特效，最重要的是在擴(kuò)展設(shè)置區(qū)域中進(jìn)行特殊設(shè)置。
Blur濾鏡產(chǎn)生像被風(fēng)吹一樣的模糊效果。打開濾鏡選項的下拉菜單，對Blur濾鏡進(jìn)行設(shè)置：
Blur(Add=?, Direction=?, Strength=?)
Add參數(shù)是一個布爾值，一般來說，當(dāng)濾鏡用于圖片時取0，用于文字時取1。
“Direction=?”模糊方向，以45度為單位改變，“0”為垂直向上，“45”向右上，“90”水平向右，“135”向右下，以依次改變。這里我們設(shè)置Direction=90。
Strength代表模糊移動值，單位為像素。我們設(shè)置Strength=180。
設(shè)置完成后，點(diǎn)擊“確定”。
5、在文檔編輯區(qū)選中文字所在單元格，在屬性面板設(shè)置文字的樣式為.test。
保存文件，按F12預(yù)覽效果。
在只有HTML的時代，只能實現(xiàn)簡單的網(wǎng)頁效果。有了CSS樣式，網(wǎng)頁排版發(fā)生了翻天覆地的變化，在Dreamweaver8里，使用CSS樣式是如此的簡單，而制作出來的效果可以如此的炫目。
球CSS背景濾鏡樣式
貌似只有這些了 。。。。
濾鏡效果 描述
Alpha 設(shè)置透明度
Blru 建立模糊效果
Chroma 把指定的顏色設(shè)置為透明
DropShadow 建立一種偏移的影象輪廓，即投射陰影
FlipH 水平反轉(zhuǎn)
FlipV 垂直反轉(zhuǎn)
Glow 為對象的外邊界增加光效
Grayscale 降低圖片的彩色度
Invert 將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果
Light 在一個對象上進(jìn)行燈光投影
Mask 為一個對象建立透明膜
Shadow 建立一個對象的固體輪廓，即陰影效果
Wave 在X軸和Y軸方向利用正弦波紋打亂圖片
Xray 只顯示對象的輪廓
1、Alpha 濾鏡
語法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,brstarty=starty,finishx=finishx,finishy=finishy)}
"Alpha"屬性是把一個目標(biāo)元素與背景混合。設(shè)計者可以指定數(shù)值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標(biāo)，可以指定點(diǎn)、線、面的透明度。他們的參數(shù)含義分別如下：
“opacity"代表透明度水準(zhǔn)。默認(rèn)的范圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。”finishopacity"是一個可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來指定結(jié)束時的透明度。范圍也是0 到 100。“style" 參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。”STARTX“和”STARTY“代表漸變透明效果的開始X和Y坐標(biāo)。”FINISHX“和”FINISHY“代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。
效果如下： 2、Blur 濾鏡
語法：對于HTML：{ilter:blur(add=add,direction=direction,strength=strength)}
對于Script語言： [oblurfilter=] object.filters.blur
用手指在一幅尚未干透的油畫上迅速劃過時，畫面就會變得模糊。”Blur"就是產(chǎn)生同樣的模糊效果。
“ADD”參數(shù)是一個布爾判斷“TRUE（默認(rèn)）”或者“FALSE”。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進(jìn)行的，“DIRECTION”參數(shù)用來設(shè)置模糊的方向。其中0度代表垂直向上，然后每45度為一個單位。它的默認(rèn)值是向左的270度。“STRENGTH“值只能使用整數(shù)來指定，她代表有多少像素的寬度將受到模糊影響。默認(rèn)是5個。對于網(wǎng)頁上的字體，如果設(shè)置他的模糊”ADD=1“，那么這些字體的效果會非常好看的。如下：
filter:blur(add=ture,direction=135,strength=10）
3、FlipH, FlipV 濾鏡 語法：{filter:filph} ,{filter:filpv} 分別是水平反轉(zhuǎn)和垂直反轉(zhuǎn)，具體如下： 4、Chroma 濾鏡
語法：{filter:chroma(color=color)}
使用”Chroma"屬性可以設(shè)置一個對象中指定的顏色為透明色，參數(shù)COLOR即要透明的顏色。下面是蘭色文字，然后用Chroma 濾鏡過濾掉蘭色，就成了下面的樣子。
filter:chroma(color=blue)
5、DropShadow 濾鏡
語法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
“DropShaow"顧名思義就是添加對象的陰影效果。其工作原理是建立一個偏移量，加上較深。"Color"代表投射陰影的顏色，"offx"和"offy"分別是X方向和Y方向陰影的餓偏移量。"Positive"參數(shù)是一個布爾值，如果為“TRUE（非0）”，那么就為任何的非透明像素建立可見的投影。如果為“FASLE（0）”，那么就為透明的像素部分建立透明效果 6、Glow 濾鏡
語法：{filter:glow(color=color,strength)}
當(dāng)對一個對象使用"glow"屬性后，這個對象的邊緣就會產(chǎn)生類似發(fā)光的效果。“COLOR”是指定發(fā)光的顏色，“STRENGTH”則是強(qiáng)度的表現(xiàn)，可以從1到255之間的任何整數(shù)來指定這個力度。
filter:glow(color=red,strength=10) 后的效果 7、Gray ,Invert,Xray 濾鏡
語法：{filter:gray} ,{filter:invert},{filter:xray}
Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對象反映出它的輪廓并把這些輪廓加亮，也就是所謂的“X”光片。
效果如下： 8、Light 濾鏡
語法：Filter{light}
這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性，那么就可以調(diào)用它的“方法(Method)"來設(shè)置或者改變屬性。“LIGHT"可用的方法有：
AddAmbient 加入包圍的光源
AddCone 加入錐形光源
AddPoint 加入點(diǎn)光源
Changcolor 改變光的顏色
Changstrength 改變光源的強(qiáng)度
Clear 清除所有的光源
MoveLight 移動光源
可以定義光源的虛擬位置，以及通過調(diào)整X軸和Y軸的數(shù)值來控制光源焦點(diǎn)的位置，還可以調(diào)整光源的形式（點(diǎn)光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態(tài)的設(shè)置光源，可能回產(chǎn)生一些意想不到的效果。后面幾頁會有具體范例。
9、Mask 濾鏡
語法：{filter:mask(color=color)}
使用"MASK"屬性可以為對象建立一個覆蓋于表面的膜，其效果就象戴者有色眼鏡看物體一樣。
10、Shadow 濾鏡
語法：{filter:shadow(color=color,direction=direction)}
利用“Shadow”屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設(shè)置投影的方向。其中0度代表垂直向上，然后每45度為一個單位。它的默認(rèn)值是向左的270度。
filter:shadow(color=red,direction=225)
filter:shadow(color=blue,direction=225)
filter:shadow(color=gray,direction=225)
效果分別如下：
11、Wave 濾鏡 語法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
"wave" 屬性把對象按垂直的波形樣式打亂。默認(rèn)是“TRUE（非0）”，
“ADD”表示是否要把對象按照波形樣式打亂，
“FREQ”是波紋的頻率，也就是指定在對象上一共需要產(chǎn)生多少個完整的波紋，
“LIGHTSTRENGTH”參數(shù)可以對于波紋增強(qiáng)光影的效果，范圍0----100，
“PHASE”參數(shù)用來設(shè)置正弦波的偏移量。
“STRENGTH”代表振幅大小。
本文標(biāo)題：css濾鏡樣式,css濾鏡特效屬于css樣式
文章轉(zhuǎn)載：http://ef60e0e.cn/article/hodhdp.html
