html特效代碼　文字光影特效及代碼

賀江之畔信都人 2011-12-19

展開全文

html特效代碼　文字光影特效及代碼

文字光影效果實際是濾鏡效果。本文介紹的內(nèi)容有：陰影字、立體字、投影字和其他光影效果及代碼。

1、陰影字配色比較容易一點，只要不與網(wǎng)頁顏色相同或相近，字體可以是任何顏色，陰影顏色比字體顏色淡。

2、立體字其實也是陰影字，其效果是通過字體和陰影兩種顏色對比來表現(xiàn)的，色差越大立體感越強。

3、投影字可以設置三種顏色，即字體顏色、發(fā)光顏色和投影顏色，通常發(fā)光顏色和投影顏色是相同的。投影字配色與發(fā)光字基本相似，您可以參照發(fā)光字體的方法給投影字配色。

陰影字

例1、

陰影字效果陰影字效果

代碼：

<CENTER><FONT style="COLOR:#DED687; FILTER: shadow(color=black); FONT-FAMILY: 宋體; FONT-SIZE: 24pt; LINE-HEIGHT:120%; WIDTH: 100%"><B>陰影字效果陰影字效果</B></FONT></CENTER>

------------------------------------------------------

例2、

古詩一首白居易

昔年八月十五夜，曲江池畔杏園邊。
今年八月十五夜，湓浦沙頭水館前。
西北望鄉(xiāng)何處是，東南見月幾回圓。
昨風一吹無人會，今夜清光似往年。

代碼：

<table width="500px" border="0" align="center" bgcolor="#E8E8FF">
<tr><td><p><FONT style="COLOR:#F24F00 ; FILTER: shadow(color=#ACACAC ); FONT-FAMILY: 隸書; FONT-SIZE: 24px; LINE-HEIGHT:150%; WIDTH:100%">
<div align="center";><br>古詩一首白居易
</div><div align="center">
昔年八月十五夜，曲江池畔杏園邊。
<br>今年八月十五夜，湓浦沙頭水館前。
<br>西北望鄉(xiāng)何處是，東南見月幾回圓。
<br>昨風一吹無人會，今夜清光似往年。
</div></FONT></p></td></tr></table>

立體字

例1、

立體字效果立體字效果

代碼：

<DIV align=center><FONT style="FONT-SIZE: 24pt; FILTER: shadow(color=green direction=45); WIDTH: 100%;
COLOR: #FFCC00; LINE-HEIGHT: 150%; FONT-FAMILY: 仿宋_GB2312"><B>立體字效果立體字效果</B></FONT></p></DIV>

------------------------------------------------------
例2、

立體字效果立體字效果

代碼：
<STRONG><p align=center><FONT style="FONT-SIZE:30pt; FILTER: shadow(color=#0000ee direction=225); WIDTH: 100%;
COLOR: #ff0000; LINE-HEIGHT: 120%; FONT-FAMILY: 隸書">立體字效果立體字效果</FONT></p></STRONG>

投影字

例1、

投影字效果投影字效果

代碼：

<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#ff0000 strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#ff0000, strength=25 direction=45); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=華文新魏 color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>

------------------------------------------------------
例2、

投影字效果投影字效果

代碼：

<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#0088FF strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#0088FF, strength=25 direction=135); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: normal;
FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書 color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>
------------------------------------------------------
例3、

投影字效果投影字效果

代碼：

<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#9900CC strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#9900CC, strength=25 direction=225); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=華文新魏 color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>
------------------------------------------------------
例4、

投影字效果投影字效果

代碼：

<TABLE align=center >
<DIV align=center>
<DIV style="FILTER: glow(color=#FF00FF strength=8); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#FF00FF, strength=25 direction=315); WIDTH: 600px; HEIGHT: 100px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 28pt; LINE-HEIGHT: 250%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書 color=#FFCCCC >
投影字效果投影字效果
</FONT></DIV></DIV></DIV></TABLE>

文字其他光影效果

例1、倒影字

倒影字效果倒影字效果
倒影字效果倒影字效果

代碼：

<DIV align=center><FONT SIZE=5 style="WIDTH: 100%; COLOR:#ff0000; LINE-HEIGHT: 90%; FONT-FAMILY: 黑體"><br><b>倒影字效果倒影字效果</b></FONT><FONT SIZE=5 style="FILTER: FlipV; WIDTH: 100%; COLOR:#ff9999; LINE-HEIGHT: 90%; FONT-FAMILY:黑體"><b>倒影字效果倒影字效果</b></FONT></DIV>
-----------------------------------------------------
例2、重影字

重影字效果重影字效果

代碼：

<DIV align=center><FONT style="FONT-SIZE: 22pt; FILTER: dropshadow(color=#00aa88,offX=4,offY=-2,Positive=true); WIDTH: 100%; COLOR: #FF0000; LINE-HEIGHT: 150%; FONT-FAMILY:黑體"><B>重影字效果重影字效果</B></FONT></DIV>

------------------------------------------------------
例3、左右翻轉

左右翻轉效果左右翻轉效果

代碼：
<DIV align=center>
<FONT face=楷體_GB2312 color=00FF00 size=6><font style="filter:FlipH;height:8pt;">左右翻轉效果</font>左右翻轉效果</DIV>

附：用濾鏡不僅能制成發(fā)光文字，而且還能制成發(fā)光圖片，使圖片邊緣產(chǎn)生光影效果。這里只舉三個例子：

例1、給圖片加發(fā)光的邊框