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

启野的博客

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

 
 
 

日志

 
 

HTML文字代码——模糊文字(滤镜filter:blur)  

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

  下载LOFTER 我的照片书  |
 

HTML

模糊文字(滤镜filter:blur)

 

模糊文字(滤镜filter:blur)博文简介

 

 

 

HTML文字代码——模糊文字(滤镜filter:blur) - qy-0824 - 启野的博客

 

 
模糊特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter:blur(使元素模糊)。
相关更多滤镜属性点击链接参照:滤镜filter 属性
 
 

HTML文字代码——模糊文字(滤镜filter:blur) - qy-0824 - 启野的博客

 

 

1、HTML相关术语:

 
HTML文字代码——模糊文字(滤镜filter:blur) - qy-0824 - 启野的博客

 

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

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

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

filter:blur(使元素模糊)

语法:

filter:blur(add=true, direction=90, strength=6);

add:是否要在已经使用Blur滤镜上的html对象上显示原来的模糊方向,0表示不显示

direction:模糊方向

左上角模糊 direction=315 

右上角模糊 direction=45

左下角模糊 direction=215

右下角模糊 direction=135

向右direction=90

向左direction=180

strength:模糊半径大小,单位像素,默认为6

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

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

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

color颜色值。

 

 

HTML文字代码——模糊文字(滤镜filter:blur) - qy-0824 - 启野的博客

 
2、基本代码:

 

TABLE 标签基本代码:
<TABLE style="filter:blur(add=true, direction=模糊方向, strength=模糊半径)"><TR><TD><FONT color=颜色值 size=字体大小值>模糊文字效果</FONT></TD></TR></table>
P 标签基本代码:
<P style="FONT-SIZE: 字体大小值pt; FILTER: blur(add=true, direction=模糊方向, strength=模糊半径); WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>模糊文字效果</FONT></P>
DIV 标签基本代码:
<DIV style="FILTER: blur(add=true, direction=模糊方向, strength=模糊半径); WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>模糊文字效果</FONT></DIV>

 

3、设置示例:

设置代码参数说明

 

字体颜色值:

color=#< xmlnamespace prefix ="st1" ns ="urn:schemas-microsoft-com:office:smarttags" />4a7ac9

字体文本框大小值:

TABLE 标签、DIV标签内相同size=5(在DIV标签内HEIGHT: 35px设置了文本框的高度、设置了文本框宽度WIDTH: 155px

P 标签内font-size:18pt (实际设置了字体中字符框的高度)、设置文本框的高度HEIGHT:20pt、设置了文本框宽度WIDTH:149px

设置的模糊值:

add=trueadd=1

direction=90

strength=6

代码如下:
TABLE 标签代码:
<TABLE style="filter:blur(add=true, direction=90, strength=6)"><TR><TD><FONT color=#4a7ac9 size=5>模糊文字效果</FONT></TD></TR></table>
P 标签代码:
<P style="FONT-SIZE: 18pt; FILTER: blur(add=true, direction=90, strength=6); WIDTH: 149px; COLOR:#4a7ac9; HEIGHT: 20px" FONT>模糊文字效果</FONT></P>
DIV标签代码:
<DIV style="FILTER: blur(add=true, direction=90, strength=6); WIDTH: 155px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>模糊文字效果</FONT></DIV>

 

代码演示示例

 

TABLE 标签代码:

当add=true或add=1时

<TABLE style="filter:blur(add=true, direction=90, strength=6)"><TR><TD><FONT color=#4a7ac9 size=5>模糊文字效果</FONT></TD></TR></table>

 

模糊文字效果

 

当add=0时

<TABLE style="filter:blur(add=0, direction=90, strength=6)"><TR><TD><FONT color=#4a7ac9 size=5>模糊文字效果</FONT></TD></TR></table>

 

模糊文字效果

P 标签代码:

当add=true或add=1时

<P style="FONT-SIZE: 18pt; FILTER: blur(add=true, direction=90, strength=6); WIDTH: 149px; COLOR:#4a7ac9; HEIGHT: 20px" FONT>

模糊文字效果</FONT></P>

模糊文字效果

当add=0时

<P style="FONT-SIZE: 18pt; FILTER: blur(add=0, direction=90, strength=6); WIDTH: 149px; COLOR:#4a7ac9; HEIGHT: 20px" FONT>模糊文字效果</FONT></P>

模糊文字效果

DIV标签代码:

当add=true或add=1时

<DIV style="FILTER: blur(add=true, direction=90, strength=6); WIDTH: 155px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>模糊文字

效果</FONT></DIV>
模糊文字效果

当add=0时

<DIV style="FILTER: blur(add=0, direction=90, strength=6); WIDTH: 155px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>模糊文字效果</FONT></DIV>

模糊文字效果

 

 

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

历史上的今天

评论

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

页脚

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