精通CSS濾鏡(filter)(實(shí)例解析)

1、好久沒弄弄美工了，前端時(shí)間由于學(xué)校的一個(gè)小網(wǎng)站的老師需要網(wǎng)站整體為綠色風(fēng)格，但是他們又不能提供相關(guān)素材，這個(gè) 項(xiàng)目就一直拖著，需求也定不下來。后臺(tái)基本功能都已經(jīng)哦了，就等頁面了，本來是想好好學(xué)學(xué)別的東西，鞏固下Java一些基礎(chǔ)，但是這事拖著，還是夠不爽的。security框架的例子也不好弄，于是還是決定總結(jié)一下最近學(xué)習(xí)的CSS濾鏡。Css濾鏡比較帥，可以取代一部分PS才能實(shí)現(xiàn)的效果，但是缺點(diǎn)也比較明顯，瀏覽器并不是都支持。但考慮到IE6，7.占的市場份額還是挺很大的，所以有學(xué)習(xí)的必要。網(wǎng)上不缺CSS濾鏡的知識(shí)，但是大多是長篇大論，或不夠全面?，F(xiàn)在結(jié)合自己做的例子和網(wǎng)上的資料，自己的學(xué)習(xí)心得總結(jié)

2、如下。畢竟我不是專業(yè)搞美工，所以這篇隨筆，是基本是面向初學(xué)者，并使其快速掌握。也了解現(xiàn)在的CSS都能做什么。為了充實(shí)內(nèi)容，順便給出jQuery實(shí)現(xiàn)彈出層特效的源碼。CSS（Cascading Style Sheets) 層疊樣式表單。1998年5月12日，Cascading Style Sheets,level 2 成為了W3C的新標(biāo)準(zhǔn)。同時(shí),”W3C CoreStyles 和CSS2 Validation Service 以及“CSS Test Suite 宣布成立。它是一組樣式，樣式中的屬性在HTML元素中依次出現(xiàn)，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標(biāo)志（TAG）里，也可以在外

3、部附加文檔作為外加文檔。此時(shí)，一個(gè)樣式表單可以作用于多個(gè)頁面-甚至整個(gè)站點(diǎn)，因此具有更好的易用性和擴(kuò)展性。對于濾鏡和漸變效果，前者是基礎(chǔ)，因?yàn)楹笳呔褪菫V鏡效果的不斷變化和演示更替。當(dāng)濾鏡和漸變效果結(jié)合到一個(gè)基本的SCRIPT小程序中后，網(wǎng)頁設(shè)計(jì)者就可以擁有一個(gè)建立動(dòng)態(tài)交互文檔的強(qiáng)大工具。也就是CSS FILTER+ SCRIPT， 這就說明想要建立動(dòng)態(tài)的文檔還要一些SCRIPT （腳本語言）的基礎(chǔ)。元素 說明BODY 網(wǎng)頁文檔的主體元素，所有的可見范圍都在元素內(nèi)BUTTON 表單域的按鈕，可以有“發(fā)送(submit)”、“重置(reset)”等形式DIV 定義了網(wǎng)頁上的一個(gè)區(qū)域，這個(gè)區(qū)域的高度

4、、寬度或者絕對位置都是以知的IMG 圖片元素，通過指定“src屬性來指定圖片的來源INPUT 輸入表單域MARQUEE 移動(dòng)字幕效果SPAN 定義了網(wǎng)頁上的一個(gè)區(qū)域，這個(gè)區(qū)域的高度、寬度或者絕對位置都是以知的TABLE 表格TD 表格數(shù)據(jù)單元格 TEXTAREA 文本區(qū)域 TFOOT 多行輸入文本框 TH 表格標(biāo)題單元格 THEAD 表格標(biāo)題 TR 表格行 / IE4.0以上支持的濾鏡屬性表 濾鏡效果 描述 ： Alpha 設(shè)置透明度 Blru 建立模糊效果 Chroma 把指定的顏色設(shè)置為透明 DropShadow 建立一種偏移的影象輪廓，即投射陰影 FlipH 水平反轉(zhuǎn) FlipV 垂直反

5、轉(zhuǎn) Glow 為對象的外邊界增加光效 Grayscale 降低圖片的彩色度 Invert 將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果 Light 在一個(gè)對象上進(jìn)行燈光投影 Mask 為一個(gè)對象建立透明膜 Shadow 建立一個(gè)對象的固體輪廓，即陰影效果 Wave 在X軸和Y軸方向利用正弦波紋打亂圖片Xray 只顯示對象的輪廓下面分別闡述：1、Alpha 濾鏡語法：FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,fin

6、ishy=finishy)Alpha屬性是把一個(gè)目標(biāo)元素與背景混合。設(shè)計(jì)者可以指定數(shù)值來控制混合的程度。這種“與背景混合”通俗地說就是一個(gè)元素的透明度。通過指定坐標(biāo)，可以指定點(diǎn)、線、面的透明度。他們的參數(shù)含義分別如下：“opacity代表透明度水準(zhǔn)。默認(rèn)的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說，0代表完全透明，100代表完全不透明?！眆inishopacity是一個(gè)可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來指定結(jié)束時(shí)的透明度。范圍也是0 到 100?！皊tyle 參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形?！盨TART

7、X“和”STARTY“代表漸變透明效果的開始X和Y坐標(biāo)?！盕INISHX“和”FINISHY“代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。css濾鏡bodyFILTER:ALPHA(opacity=50,finishopacity=80,style=2施楊de編程世界2、Blur 濾鏡語法：對于HTML：filter:blur(add=add,direction=direction,strength=strength)用手指在一幅尚未干透的油畫上迅速劃過時(shí)，畫面就會(huì)變得模糊?！盉lur就是產(chǎn)生同樣的模糊效果?！癆DD”參數(shù)是一個(gè)布爾判斷“TRUE（默認(rèn)）”或者“FALSE”。它指定圖片是否被改變成印象

8、派的模糊效果。模糊效果是按順時(shí)針的方向進(jìn)行的，“DIRECTION”參數(shù)用來設(shè)置模糊的方向。其中0度代表垂直向上，然后每45度為一個(gè)單位。它的默認(rèn)值是向左的270度?！癝TRENGTH“值只能使用整數(shù)來指定，她代表有多少像素的寬度將受到模糊影響。默認(rèn)是5個(gè)。代碼如下：css濾鏡bodyfilter:blur(add=ture,direction=135,strength=200)施楊de編程世界效果：3、FlipH, FlipV 濾鏡語法：filter:filph ,filter:filpv 分別是水平反轉(zhuǎn)和垂直反轉(zhuǎn)4、Chroma 濾鏡語法：filter:chroma(color=color

9、)使用”Chroma屬性可以設(shè)置一個(gè)對象中指定的顏色為透明色，參數(shù)COLOR即要透明的顏色。代碼如下：css濾鏡bodyfilter:chroma(color=#CC33C2)施楊de編程世界可以屏蔽顏色，大有用處。精通CSS濾鏡（filter）（實(shí)例解析）Excel服務(wù)器-用Excel做管理系統(tǒng)關(guān)鍵字： CSS濾鏡 WHATWG HTML 5 網(wǎng)頁圖片 網(wǎng)頁顏色 圓角矩形精通CSS濾鏡（filter）（實(shí)例解析）。Positive參數(shù)是一個(gè)布爾值，如果為“TRUE（非0）”，那么就為任何的非透明像素建立可見的投影。如果為“FASLE（0）”，那么就為透明的像素部分建立透明效果 代碼如下：dr

10、opshadow(color=gray,offx=5,offy=5.positive=0)效果：6、Glow 濾鏡語法：filter:glow(color=color,strength)當(dāng)對一個(gè)對象使用glow屬性后，這個(gè)對象的邊緣就會(huì)產(chǎn)生類似發(fā)光的效果?！癈OLOR”是指定發(fā)光的顏色，“STRENGTH”則是強(qiáng)度的表現(xiàn)，可以從1到255之間的任何整數(shù)來指定這個(gè)力度。filter:glow(color=red,strength=10) 后的效果filter:glow(color=#ffff00,strength=5) 后的效果css濾鏡bodyfilter:glow(color=red,str

11、ength=10).trymargin-left:30px;施楊de編程世界7、Gray ,Invert,Xray 濾鏡語法：filter:gray ,filter:invert,filter:xrayGray濾鏡是把一張圖片變成灰度圖；（汶川大地震后很多網(wǎng)站色調(diào)都變灰色，就是用的這一點(diǎn)代碼實(shí)現(xiàn)的）Invert濾鏡是把對象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對象反映出它的輪廓并把這些輪廓加亮，也就是所謂的“X”光片。效果：效果：8、Light 濾鏡語法：Filterlight這個(gè)屬性模擬光源的投射效果。一旦為對象定義了“LIGHT濾鏡屬性，那么就可以調(diào)用它的“方法

12、(Method)來設(shè)置或者改變屬性?！癓IGHT可用的方法有：AddAmbient 加入包圍的光源AddCone 加入錐形光源AddPoint 加入點(diǎn)光源Changcolor 改變光的顏色Changstrength 改變光源的強(qiáng)度Clear 清除所有的光源MoveLight 移動(dòng)光源addAmbient (iRed,iGreen,iBlue,iStrength) : 為濾鏡添加環(huán)境光。環(huán)境光是無方向的，并且均勻的灑在頁面的表面。環(huán)境光有顏色和強(qiáng)度值，可以為對象田家更多的顏色。它通常和其他光一起使用。無返回值。參數(shù)見下表。iRed : 必選項(xiàng)。整數(shù)值(Integer)。 指定紅色值。取值范圍為

13、0 - 255 。iBlue : 必選項(xiàng)。整數(shù)值(Integer)。 指定藍(lán)色值。取值范圍為 0 - 255 。iStrength : 必選項(xiàng)。整數(shù)值(Integer)。 指定光強(qiáng)度。取值范圍為 0 - 100 。changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改變光的顏色。無返回值。參數(shù)見下表。iLightNumber : 必選項(xiàng)。整數(shù)值(Integer)。 指定光的標(biāo)識(shí)符。iRed : 必選項(xiàng)。整數(shù)值(Integer)。指定紅色值。取值范圍為 0 - 255 。iGreen : 必選項(xiàng)。整數(shù)值(Integer)。指定綠色值。

14、取值范圍為 0 - 255 。iBlue : 必選項(xiàng)。整數(shù)值(Integer)。指定藍(lán)色值。取值范圍為 0 - 255 。fAbsolute : 必選項(xiàng)。布爾值(Boolean)。指定改變是替換當(dāng)前設(shè)置的絕對值，還是加到當(dāng)前設(shè)置的相對值。此參數(shù)不等于零表示采用絕對值。否則表示采用相對值?？梢远x光源的虛擬位置，以及通過調(diào)整X軸和Y軸的數(shù)值來控制光源焦點(diǎn)的位置，還可以調(diào)整光源的形式（點(diǎn)光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動(dòng)態(tài)的設(shè)置光源，可能回產(chǎn)生一些意想不到的效果。實(shí)現(xiàn)圖片自動(dòng)變色效果css濾鏡body.trymargin-left:30px;施楊de編程世界9、

15、Mask 濾鏡語法：filter:mask(color=color)使用MASK屬性可以為對象建立一個(gè)覆蓋于表面的膜，其效果就象戴者有色眼鏡看物體一樣。css濾鏡bodyfilter:mask(color=yellow);#trymargin-left:30px;施楊de編程世界雖然實(shí)現(xiàn)，但是效果并不想想象的那樣帥，不好用。10、Shadow 濾鏡語法：filter:shadow(color=color,direction=direction)利用“Shadow”屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設(shè)置投影的方向。其中0度代表垂直向上，然后每45度為一個(gè)

16、單位。它的默認(rèn)值是向左的270度。filter:shadow(color=red,direction=225)filter:shadow(color=blue,direction=225)filter:shadow(color=gray,direction=225)css濾鏡bodyfilter:shadow(color=red,direction=225);#trymargin-left:30px;施楊de編程世界效果：11、Wave 濾鏡 語法：filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength

17、=strength)wave 屬性把對象按垂直的波形樣式打亂。默認(rèn)是“TRUE（非0）”，“ADD”表示是否要把對象按照波形樣式打亂，“FREQ”是波紋的頻率，也就是指定在對象上一共需要產(chǎn)生多少個(gè)完整的波紋，“LIGHTSTRENGTH”參數(shù)可以對于波紋增強(qiáng)光影的效果，范圍0-100，“PHASE”參數(shù)用來設(shè)置正弦波的偏移量。“STRENGTH”代表振幅大小。css濾鏡bodyfilter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=20); #trymargin-left:30px;施楊de編程世界效果

18、：jQuery彈出層源碼：頁面：Resizeabledemo-InterfacepluginforjQuery管理員登陸登陸界面varclient_id=1;css源碼：BODYBACKGROUND:#fff;HEIGHT:100%#windowDISPLAY:none;LEFT:200px;OVERFLOW:hidden;WIDTH:400px;POSITION:absolute;TOP:100px;HEIGHT:300px#windowTopBACKGROUND-POSITION:righttop;BACKGROUND-IMAGE:url(images/window_top_end.png

19、);OVERFLOW:hidden;CURSOR:move;BACKGROUND-REPEAT:no-repeat;POSITION:relative;HEIGHT:30px#windowTopContentBACKGROUND-POSITION:lefttop;FONT-WEIGHT:bold;FONT-SIZE:14px;BACKGROUND-IMAGE:url(images/window_top_start.png);OVERFLOW:hidden;COLOR:#6caf00;TEXT-INDENT:10px;LINE-HEIGHT:30px;MARGIN-RIGHT:13px;BACK

20、GROUND-REPEAT:no-repeat;FONT-FAMILY:Arial,Helvetica,sans-serif;HEIGHT:30px#windowMinRIGHT:25px;CURSOR:pointer;POSITION:absolute;TOP:10px#windowMaxDISPLAY:none;RIGHT:25px;CURSOR:pointer;POSITION:absolute;TOP:10px#windowCloseRIGHT:10px;CURSOR:pointer;POSITION:absolute;TOP:10px#windowBottomBACKGROUND-P

21、OSITION:rightbottom;BACKGROUND-IMAGE:url(images/window_bottom_end.png);BACKGROUND-REPEAT:no-repeat;POSITION:relative;HEIGHT:270px#windowBottomContentBACKGROUND-POSITION:leftbottom;BACKGROUND-IMAGE:url(images/window_bottom_start.png);MARGIN-RIGHT:13px;BACKGROUND-REPEAT:no-repeat;POSITION:relative;HEI

22、GHT:270px#windowResizeRIGHT:3px;CURSOR:se-resize;BOTTOM:5px;POSITION:absolute#windowContentBORDER-RIGHT:#6caf001pxsolid;BORDER-TOP:#6caf001pxsolid;FONT-SIZE:11px;LEFT:10px;OVERFLOW:auto;BORDER-LEFT:#6caf001pxsolid;WIDTH:375px;MARGIN-RIGHT:10px;BORDER-BOTTOM:#6caf001pxsolid;FONT-FAMILY:Arial,Helvetic

23、a,sans-serif;POSITION:absolute;TOP:30px;HEIGHT:255px;BACKGROUND-COLOR:#fff#windowContent*MARGIN:10px.transferer2BORDER-RIGHT:#6baf041pxsolid;BORDER-TOP:#6baf041pxsolid;FILTER:alpha(opacity=30);BORDER-LEFT:#6baf041pxsolid;BORDER-BOTTOM:#6baf041pxsolid;BACKGROUND-COLOR:#b4f155;-moz-opacity:0.3;opacity

24、:0.3js源碼：$(document).ready(function()$(#windowOpen).bind(click,function()if($(#window).css(display)=none)$(this).TransferTo(to:window,className:transferer2,duration:400,complete:function()$(#window).show(););this.blur();returnfalse;);$(#windowClose).bind(click,function()$(#window).TransferTo(to:wind

25、owOpen,className:transferer2,duration:400).hide(););$(#windowMin).bind(click,function()$(#windowContent).SlideToggleUp(300);$(#windowBottom,#windowBottomContent).animate(height:10,300); $(#window).animate(height:40,300).get(0).isMinimized=true; $(this).hide();$(#windowResize).hide();$(#windowMax).show(););$(#windowMax).bind(click,function()varwindowSize=$.iUtil.ge