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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML文字代码——发光文字(滤镜filter: glow)  

2011-03-18 23:06:20|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

HTML

发光文字(滤镜filter: glow)

 

发光文字(滤镜filter: glow)博文简介

 

 

 HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

发光特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter: glow(使元素发光)。

相关更多滤镜属性点击链接参照:滤镜filter 属性

自动添加容器TABLEP或者容器DIV ,将不能够把我们所要添加的特效填进去,所以只能够自己编写。

在此之前我直接从其他网站复制粘贴代码:

FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#FF0000,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT>

结果在网易失效。通过实践需要容器,我用TABLE容器加载在这个代码上,不显示效果,后来用P容器正常显示,同时发现TABLE容器、P容器与DIV容器,这三个容器的编写方式不同。只要编写正确,都可以显示发光特效文字效果。

QQ空间又有所不同,在这里不能显示只做比较,不做编写,因为QQ空间能够自动添加。不同的网页有不同的代码写法,在这里做比较,并写出一些特效的代码共享。

 

 

HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

 

1、HTML相关术语:

 

HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

TABLE 标签是一个容器标记:<table>...</table>

P 标签定义段落容器标记:<p>...</p>

DIV标签严格的组织容器标记:<div>...</div>

filter:glow 使元素发光滤镜

语法:

filter:glow(color=#ff0000,strength=6)

filter:glow(color=#ff0000, direction=2)

强度属性:

direction 属性规定文本的方向 / 书写方向。

(在这里direction是设置阴影的强度。)

strength强度

size 属性定义的是以像素为单位的输入字段宽度。

font规定文本的字体、字体尺寸、字体颜色。<font>...</font> 

font-size 属性可设置字体的尺寸。该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。

color颜色值

 

HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

2、基本代码:

 

TABLE 标签基本代码:

<table style="FILTER: glow(color=颜色值,direction=2)"><TR><TD><font color=颜色值 size=字体大小值>发光文字效果</font></TD></TR></table>

P 标签基本代码:

<P FONT style="FONT-SIZE: 字体大小值pt; FILTER: Glow(color=颜色值,strength=6); COLOR: 颜色值; HEIGHT: 文本框高度pt">发光文字效果</FONT></P>

DIV标签基本代码:

<DIV style="FILTER: glow(color=颜色值,strength=6); COLOR: 颜色值; HEIGHT: 文本框高度px"><FONT size=字体大小值>发光文字效果</FONT></DIV>

QQ空间基本代码:(QQ空间,不适宜一些网站)

<P><FONT class=lightFont title=发光字 color=#6633ff _glowColor="#6633FF">发光文字效果</FONT></P>

3、设置示例:

设置代码参数说明

 

滤镜颜色值:

color=#6699FF

字体颜色值:

TABLE 标签内为color=#ffffff

P 标签、DIV标签内为COLOR: #ffffff

字体大小值:

TABLE 标签、DIV标签内相同size=2(在DIV标签内HEIGHT: 10px设置了文本框的高度)

P 标签内font-size:10pt (实际设置了字体中字符框的高度)与HEIGHT:10pt值相同

发光强度值:

TABLE 标签内direction=2

P 标签、DIV标签内为strength=6

备注:当字体加大时,TABLE 标签内的direction 强度值和P 标签、DIV内标签内的strength强度值也加大时,才能体现效果。

代码如下:

TABLE 标签代码:

<table style="FILTER:glow(color=#6699FF,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

P 标签基本代码:

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#6699FF ,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

DIV标签基本代码:

<DIV style="FILTER:glow(color=#6699FF,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

 

代码演示示例

 

TABLE 标签代码:

<table style="FILTER:glow(color=#6699FF,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

 

P 标签基本代码:

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#6699FF ,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

 

DIV标签基本代码:

<DIV style="FILTER:glow(color=#6699FF,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

 

 

4、分享代码:

 

HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

TABLE 标签代码:

 

发光文字效果

<table style="FILTER:glow(color=#6699FF,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

<table style="FILTER:glow(color=#FF0000,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

<table style="FILTER:glow(color=#FF0080,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

<table style="FILTER:glow(color=#FF8000,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

<table style="FILTER:glow(color=#008080,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

<table style="FILTER:glow(color=#0000FF,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

<table style="FILTER:glow(color=#8000FF,direction=2)"><TR><TD><font color=#ffffff size=2>发光文字效果</font></TD></TR></table>

 

发光文字效果

<table style="FILTER:glow(color=#ffffff,direction=2)"><TR><TD><font color=#000000 size=2>发光文字效果</font></TD></TR></table>

备注:最后一组代码为字体笔画为背景色(即为:光晕效果文字代码),如果是白底的背景则色彩换过来(发什么色彩的光就改变滤镜filter:glow的色彩)

HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

P 标签基本代码:

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#6699FF ,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#FF0000 ,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#FF0080 ,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#FF8000,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#008080,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#0000FF,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#8000FF,strength=6); COLOR: #ffffff; HEIGHT: 10pt">发光文字效果</FONT></P>

发光文字效果

<P FONT style="FONT-SIZE: 10pt; FILTER: Glow(color=#ffffff,strength=6); COLOR:#000000; HEIGHT: 10pt">发光文字效果</FONT></P>

备注:最后一组代码为字体笔画为背景色(即为:光晕效果文字代码),如果是白底的背景则色彩换过来(发什么色彩的光就改变滤镜filter:glow的色彩)

HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

DIV标签基本代码:

 

发光文字效果

<DIV style="FILTER:glow(color=#6699FF,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

<DIV style="FILTER:glow(color=#FF0000,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

<DIV style="FILTER:glow(color=#FF0080,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

<DIV style="FILTER:glow(color=#FF8000,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

<DIV style="FILTER:glow(color=#008080,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

<DIV style="FILTER:glow(color=#0000FF,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

<DIV style="FILTER:glow(color=#8000FF,strength=6);COLOR:#ffffff; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

发光文字效果

<DIV style="FILTER:glow(color=#ffffff,strength=6);COLOR:#000000; HEIGHT: 10px"><FONT size=2>发光文字效果</FONT></DIV>

备注:最后一组代码为字体笔画为背景色(即为:光晕效果文字代码),如果是白底的背景则色彩换过来(发什么色彩的光就改变滤镜filter:glow的色彩)

HTML文字代码——发光文字(滤镜filter: glow) - qy-0824 - 启野的博客

 

 

欢迎光临启野博客!
  
  评论这张
 
阅读(6840)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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