提示：您可以先修改部分代碼再運行
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>用CSS設計藝術字集錦（二）</title><STYLE type=text/css>.title_1 {FONT-SIZE: 12px; FILTER: DropShadow(Color=#213C63, OffX=1, OffY=1); WIDTH: 100%; COLOR: #e1e4ec; FONT-FAMILY: "Verdana"}.text {FONT-SIZE: 12px; COLOR: #666699; LINE-HEIGHT: 16px; FONT-FAMILY: "Verdana"; TEXT-DECORATION: none}.unnamed1 {FILTER: DropShadow(Color=#FFFFFF, OffX=1, OffY=1)}</sTYLE></head><body><TABLE cellSpacing=1 cellPadding=0 width=500 align=center bgColor=#8c96b5 border=0> <TBODY> <TR> <TD bgColor=#ffffff> <TABLE cellSpacing=1 borderColorDark=#ffffff cellPadding=0 width="100%" borderColorLight=#000000 border=0> <TBODY> <TR bgColor=#8c96b5> <TD width="100%" bgColor=#8c96b5 colSpan=2 height=16> <DIV class=title_1 align=center>..:: 巧用CSS製作藝術字 ::..</dIV></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text>如果靈活應用CSS各種濾鏡的特點並加以組合，我們可以得到許多意想不到的效果。這是一些效果示範，供各位參考。</tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR>用blur濾鏡做出的效果，代碼如下：<BR><B>FILTER: blur(direction=135,strength=8)</b></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR>用dropshadow濾鏡做出的效果，代碼如下：<BR><B>FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)</b></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR>用glow濾鏡做出的效果，代碼如下：<BR><B>FILTER: glow(color=#B4BBCF,strength=5)</b></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR>這個效果用到了兩種濾鏡：shadow和alpha，代碼如下：<BR><B>FILTER: alpha(opacity=100,finishiopacity=0,style=1)<BR>shadow(color=#8C96B5,direction=135)</b> </tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR>這個效果也用到兩個濾鏡mask和shadow，代碼如下：<BR><B>FILTER: mask(color=#E1E4EC)<BR>shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)</b><BR><BR>注意：mask的顏色要和網頁背景色一致，字型的顏色由shadow決定。</tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR>如果說上面的效果是陰文的話，那麼這個效果的應該算是陽文了，用兩個濾鏡實現mask和dropshadow，注意mask的顏色要和網頁背景色一致，或者把mask和chroma成對使用，也可達到同樣效果。代碼如下：<BR><B>FILTER: mask(color=#E1E4EC)<BR>dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)<BR>chroma(color=#E1E4EC)"</b> </tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#e1e4ec size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR>用glow濾鏡可以做空心字，方法是將字型顏色設定為背景色，再將glow濾鏡的strenght的值設定為1或2即可。這個效果的代碼如下：<BR><B>FILTER: glow(color=#8C96B5,strength=2)<BR>shadow(color=#B4BBCF,direction=135)</b> </tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> <TABLE cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD align=middle><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR><BR> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD align=middle height=54><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE><BR><BR> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD align=middle height=54><FONT face=黑體 color=#8c96b5 size=6><B><I>E流設計</i></b></fONT></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD class=unnamed1><FONT class=text>如果背景採用圖片，為了能達到滿意的效果需要將mask和chroma組合使用，這樣能使字型感覺是透明的，讓背景透出來。<BR><BR>上面列出的效果前者的代碼是：<BR><B>FILTER: mask(color=#E1E4EC)<BR>shadow(color=#B4BBCF,direction=135)<BR>chroma(color=#E1E4EC)</b><BR>注意：字型的顏色由shadow決定，mask和chroma的顏色要相同，色彩任意。<BR><BR>中間的代碼是：<BR><B>FILTER: glow(strength=1)<BR>mask(color=#B4BBCF)<BR>chroma(color=#B4BBCF)</b><BR>注意：mask和chroma的顏色相同，這個顏色決定了字型的顏色。<BR><BR>後者的代碼是：<BR><B>FILTER: mask(color=#E1E4EC)<BR>dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)<BR>chroma(color=#E1E4EC)</b><BR>注意：mask和chroma的顏色相同，色彩由dropshadow決定。</fONT></tD></tR></tBODY></tABLE></tD></tR> <TR> <TD bgColor=#e1e4ec> </tD></tR></tBODY></tABLE></body></html>
提示：您可以先修改部分代碼再運行
