注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

章鱼博客

与你共享

 
 
 

日志

 
 

文字的特效  

2009-02-01 23:03:29|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

文字的特效 

 

用CSS样式表的滤镜属性语句,使文字产生立体阴影和光晕重叠等特殊效果,俗称特效文字。

代码(1)

<DIV align=center>
<DIV style="FILTER: shadow(color=#ff0000, strength=50); WIDTH: 500px">
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 60pt; LINE-HEIGHT: normal; FONT-STYLE: normal;

FONT-VARIANT: normal" face=华文行楷 color=#fff000>
一生何求</FONT></DIV></DIV>

说明:

style="FILTER: shadow   在文字的边外加阴影

(color=#ff0000   阴影颜色
strength=50        阴影强度   取值0~100

WIDTH: 500px   改变此值宽度可变

FONT-SIZE: 60pt  改变此值字体大小可变

效果:

一生何求

 

代码(2)

<DIV align=center>
<div style="FONT-SIZE: 60pt; FILTER: shadow(color=#87CEFA, strength=30); WIDTH: 600px; HEIGHT:

80px"><FONT face=隶书 color=#1e90ff>心想事成</FONT></div></div>
效果:

心想事成
 
代码(3)
<DIV align=center>                                                 
<DIV style="FONT-SIZE: 60pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #ff0000; LINE-
HEIGHT: 150%">
<FONT style="FONT-FAMILY: 华文行楷">网络一线牵</DIV></DIV>
效果:
网络一线牵

 

 代码(4)

<center>
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"><FONT style="FONT-SIZE: 60pt;FONT-FAMILY:

华文行楷; COLOR: #ffff00">大好河山</FONT></div>
</center>

说明:

<div style="FILTER: Glow     Glow滤镜在文字的外边产生光辉效果

color=#0000ff      表示Glow滤镜光辉的颜色

strength=12         表示Glow滤镜光辉的强度,取值0~100

FONT-SIZE: 60pt   表示字号的大小,取值一般在20~80

华文行楷; COLOR: #ffff00   表示字体的颜色,可选择。

效果:

大好河山

 

 代码(5)

<CENTER>
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#ff0000,offX=5,offY=3,Positive=1);

WIDTH:100%; COLOR:#008000;LINE-HEIGHT:100%"><FONT style="FONT-SIZE:60pt;FONT-FAMILY:隶书">江山如此多娇</FONT>
</div>
</CENTER>

style="FONT-SIZE:70pt  表示文字的排列,改变数值文字的排列会上下移动

filter:dropshadow            表示dropshadow滤镜在文字外边产生重叠效果

color=#ff0000   表示dropshadow滤镜在文字外边产生的重叠效果颜色

offX=5   表示左右重叠效果,改变此值重叠效果会变化。负值重叠效果会在文字的左边产生、正值重叠效果会在文字的右边产生,值越大重叠效果也越大。

offY=3  表示上下重叠效果,改变此值重叠效果会变化。负值重叠效果会在文字的上边产生、正值重叠效果会在文字的下边产生,值越大重叠效果也越大。

Positive属性    表示透明象素阴影。有二个值,1为透明、0为不透明

WIDTH:100%  改变此百分数,文字宽度会有变化。

COLOR:#008000   表示文字的颜色,可选择。

LINE-HEIGHT:100%  改变此百分数,文字高度会有变化。

FONT-SIZE:60pt    表示字体大小,数字越大字体也越大。

效果:

江山如此多娇

 

 代码(6)

<CENTER>
<div style="FONT-SIZE:70pt;filter:shadow(color=darkcyan,direction=180);WIDTH:100%;

COLOR:#9932CC;LINE-HEIGHT:150%"><FONT style="FONT-SIZE:60pt;FONT-FAMILY:隶书">世界之窗</FONT>
</div></CENTER>

说明:

filter:shadow     表示shadow滤镜能使文字边上产生阴影效果

color=darkcyan  表示文字边上产生阴影效果的颜色

direction属性     表示阴影角度,取值范围0~360度

效果:

世界之窗

 

 代码(7)

<CENTER>
<DIV style="FONT-SIZE:60pt;filter:dropshadow(color=000066,offX=-5,offY=-3,Positive=1);WIDTH:100%; COLOR:#FF0000;LINE-HEIGHT:120%"><FONT style="FONT-FAMILY: 华文行楷">江山如此多娇</FONT></DIV>
</CENTER>

说明:

FONT-SIZE:60pt    表示字号,值可选择,数字越大、字也越大。

文字阴影另一种格式,阴影偏离位置可变。

Offx:X轴偏离值,正值阴影偏右,负值阴影偏左。

Offy:Y轴偏离值,正值阴影偏下,负值阴影偏上。

Positive属性    表示透明象素阴影。有二个值,1为透明、0为不透明。

效果:

江山如此多娇

 

 代码(8)

<center>
<div style="FONT-SIZE:60pt;filter:wave

(add=0,lightstrength=30,strength=6,freq=3,phrase=50);WIDTH:100%; COLOR:brown;LINE-HEIGHT:150%">
<FONT style="FONT-FAMILY:华文行楷">飞流直下三千尺</FONT></div>
</center>

说明:

FONT-SIZE:60pt   表示字号,值可选择,数字越大、字也越大。

filter:wave     表示 滤镜对过滤对象生成正弦波变形,造成一种变幻效果。

add=0          0表示将原始对象加入最后效果中,1则反之。

lightstrength=30    表示字体颜色会从上至下,有变化,值越大字体颜色变化越明显。

strength=6      表示波形的振幅,值越大波形的振幅也越强烈。

freq=3          表示显示的频率,即应出现多少个波形。

COLOR:brown    表示字体的颜色,可选择。

效果:

飞流直下三千尺

 

 代码(9)

<center>                                                  
<DIV style="FILTER: glow(color=#ff0000 strength=16); WIDTH: 100%; "> <FONT style="FONT-SIZE:

60pt; FONT-FAMILY: 华文新魏" color=#FFF8DC>几度夕阳红</font></center>

说明:

FILTER: glow     表示能使文字边外产生辉光效果

color=#ff0000    表示文字边外产生辉光效果的颜色

strength=16       表示文字边外产生辉光效果的强度,值越大辉光强度也大。

color=#FFF8DC  表示文字的颜色,可选择。

效果:

几度夕阳红

 

 用表格做的代码(1)

<TABLE cellSpacing=0 cellPadding=0 align=center background=图片地址(纯色图片或gif图片)   border=0>

<TBODY>
<TR>
<TD style="FILTER: chroma
(color=#ff0000">
<TABLE align=center bgColor=#ffffff>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 60pt" face=华文行楷
color=#ff0000>闪动的漂亮特效字

</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

说明:

红色代码必须一致,否则图片地址的图片不能显示出来。

绿色代码是字体的背景颜色,颜色可以选择。

效果:

闪动的漂亮特效字

 

 用表格做的代码(2)

<TABLE align=center background=图片地址(纯色图片或gif图片) border=0 bordercolor=#ffffff

cellSpacing=10 cellPadding=20>
<TBODY>
<TR>
<TD style="FILTER: mask(
color=#ffffff)" align=middle><FONT style="FONT-SIZE: 60pt" face=隶书

color=#8A2BE2>一生何求歡迎您光臨</FONT>
</TD></TR></TBODY></TABLE>

说明:

红色代码表示字体的背景颜色,可选择、这里字体的背景颜色是白色。

蓝色代码表示字体大小,可选择,值越大字体也越大。

效果:

一生何求歡迎您光臨

 

 

  评论这张
 
阅读(938)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017