文字应用CSS滤镜特效集锦??蓝色经典 -- 叁柒設計_三七设计 Three Seven Design Workroom -- 日志展示

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=orange,endColorStr=black)">
<center>
<b><font face="华文新魏, Helvetica, sans-serif" style="cursor:crosshair"><span style="color:orange;line-height:35pt;FILTER: glow(color=white,strength=3) shadow(color=gold,direction=135,strength=13); POSITION: relative; WIDTH: 100%">
<font size="6" >现 在 人 的 生 活 都 是 一 个 模 式 几 个 方 向 而 已 ！</font></span></font></b>
<div style="position:absolute;top:80px;left:45px;">
<P><FONT style="FONT-SIZE: 18pt; FILTER: shadow(color=lime); WIDTH: 100%; FONT-FAMILY: 华文彩云;color:red;"><B>离题三千丈~滔滔灌水长~不知论坛里~何人比他强?</B></FONT> </P></div>
<br><br><br><br>
<p style="font-size:22px;height:12px;color:white;font-family:隶书;filter:glow(color=black,strength=3);">在奔跑的路上，我逐渐的失去了光芒</p>
<p style="font-size:22px;height:12px;color:white;font-family:华文行楷;filter:glow(color=red,strength=3);">要为成功找方法，不为失败找借口</p>
<p style="font-size:22px;height:12px;color:white;font-family:华文新魏;filter:glow(color=green,strength=3);">为活着而吃饭！！决不为吃饭而活着！！</p>
<p style="font-size:22px;height:12px;color:white;font-family:隶书;filter:glow(color=blue,strength=6);">一粥一饭当思来处不易 半丝半缕恒念物力维艰</p>
<style type="text/css">

</style>
<center>
<table width="567" border="0" cellspacing="0" cellpadding="0" height="129">
<tr>
<td class="unnamed1" align="center">就让一切顺其自然</td>
</tr>
</table>
<br>
<center>
<table border="0" width="500" height="56" cellspacing="3" cellpadding="3" style="border:5 red double;"><tr><td style="background:#55fa77;text-align:center;vertical-align:middle;font-family:隶书;font-size:18pt;color:#ffffff;border:0;FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=orange,endColorStr=black)">人最想获得的是尊重用一生学习彼此尊重</td></tr></table>
<br><br>
<center>
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#333333">
<tr>
<td><table width="105" height="24" border="1" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#006699" bordercolordark="#AAE3FF" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#AAE3FF,endColorStr=#006699);">
<tr>
<td align="center" style="padding-top: 3px;"> <table width="95" height="20" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#AAE3FF" bordercolordark="#006699" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#005279,endColorStr=#AAE3FF);">
<tr>
<td align="center" valign="middle" style="padding-top: 3px;"><table width="90" height="15" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="filter: DropShadow(Color=#000000,Offx=1,Offy=1,Positive=50)"><font color="#FFFFFF" size="1" face="verdana" ><strong>Push Me ^^</strong></font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table> </td>
<td><table width="105" height="24" border="1" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#006699" bordercolordark="#AAE3FF" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#AAE3FF,endColorStr=#006699);">
<tr>
<td align="center" style="padding-top: 3px;"> <table width="95" height="20" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#AAE3FF" bordercolordark="#006699" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#005279,endColorStr=#AAE3FF);">
<tr>
<td align="center" valign="middle" style="padding-top: 3px;"><table width="90" height="15" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="filter: DropShadow(Color=#000000,Offx=1,Offy=1,Positive=50)"><font color="#FFFFFF" size="1" face="verdana" ><strong>Push Me ^^</strong></font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td><table width="105" height="24" border="1" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#006699" bordercolordark="#AAE3FF" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#AAE3FF,endColorStr=#006699);">
<tr>
<td align="center" style="padding-top: 3px;"> <table width="95" height="20" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#AAE3FF" bordercolordark="#006699" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#005279,endColorStr=#AAE3FF);">
<tr>
<td align="center" valign="middle" style="padding-top: 3px;"><table width="90" height="15" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="filter: DropShadow(Color=#000000,Offx=1,Offy=1,Positive=50)"><font color="#FFFFFF" size="1" face="verdana" ><strong>Push Me ^^</strong></font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td><table width="105" height="24" border="1" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#006699" bordercolordark="#AAE3FF" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#AAE3FF,endColorStr=#006699);">
<tr>
<td align="center" style="padding-top: 3px;"> <table width="95" height="20" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#AAE3FF" bordercolordark="#006699" style="border:1px;filter : progid:DXImageTransform.Microsoft.gradient(startColorStr=#005279,endColorStr=#AAE3FF);">
<tr>
<td align="center" valign="middle" style="padding-top: 3px;"><table width="90" height="15" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="filter: DropShadow(Color=#000000,Offx=1,Offy=1,Positive=50)"><font color="#FFFFFF" size="1" face="verdana" ><strong>Push Me ^^</strong></font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<br><br>
<div align="center"><SPAN style="FILTER: shadow(color=ee1001); WIDTH: 92%; font-size: 11pt;color=#ffff00"><b>简 单 就 是 风 格 ，简 单 亦 是 快 乐 ！</b></SPAN><br><br></div>
<br><br><br>
<SPAN style="filter: progid:DXImageTransform.Microsoft.Emboss();  color: darkred; background: skyblue; height: 0px;font-family:华文新魏;font-size:18px;">
<center><IMG src="http://www.blueidea.com/articleimg/usericon/marvellous.gif"><br>人最想获得的是尊重<br>
用一生学习彼此尊重</SPAN>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页标题</title>
<style type="text/css">

</style>
</head>
<body>
<div id="div">
<div id="div1">
<SPAN style="TEXT-INDENT: 0px; LINE-HEIGHT: 24px">WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对像模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准： <BR><BR>1．结构标准语言 <BR>（1）XML <BR><BR>XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。 <BR><BR>（2）XHTML <BR><BR>XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考<A href="http://www.w3.org/TR/xhtml1" target=_blank>http://www.w3.org/TR/xhtml1</A>）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 <BR><BR>2. 表现标准语言 <BR>CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考<A href="http://www.w3.org/TR/CSS2/" target=_blank>http://www.w3.org/TR/CSS2/</A>）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 <BR><BR>3.行为标准 <BR>（1）DOM <BR><BR>DOM是Document Object Model文档对像模型的缩写。根据W3C DOM规范（<A href="http://www.w3.org/DOM/" target=_blank>http://www.w3.org/DOM/</A>），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 <BR><BR>(2) ECMAScript <BR><BR>ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（<A href="http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM" target=_blank>http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM</A>）。<BR> </SPAN>
</div>
<div id="filter">
<div id="div2">
<SPAN style="TEXT-INDENT: 0px; LINE-HEIGHT: 24px">WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对像模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准： <BR><BR>1．结构标准语言 <BR>（1）XML <BR><BR>XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。 <BR><BR>（2）XHTML <BR><BR>XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考<A href="http://www.w3.org/TR/xhtml1" target=_blank>http://www.w3.org/TR/xhtml1</A>）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 <BR><BR>2. 表现标准语言 <BR>CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考<A href="http://www.w3.org/TR/CSS2/" target=_blank>http://www.w3.org/TR/CSS2/</A>）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 <BR><BR>3.行为标准 <BR>（1）DOM <BR><BR>DOM是Document Object Model文档对像模型的缩写。根据W3C DOM规范（<A href="http://www.w3.org/DOM/" target=_blank>http://www.w3.org/DOM/</A>），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 <BR><BR>(2) ECMAScript <BR><BR>ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（<A href="http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM" target=_blank>http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM</A>）。<BR> </SPAN>
</div></div>
<SPAN style="TEXT-INDENT: 0px; LINE-HEIGHT: 24px">WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对像模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准： <BR><BR>1．结构标准语言 <BR>（1）XML <BR><BR>XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。 <BR><BR>（2）XHTML <BR><BR>XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考<A href="http://www.w3.org/TR/xhtml1" target=_blank>http://www.w3.org/TR/xhtml1</A>）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 <BR><BR>2. 表现标准语言 <BR>CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考<A href="http://www.w3.org/TR/CSS2/" target=_blank>http://www.w3.org/TR/CSS2/</A>）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 <BR><BR>3.行为标准 <BR>（1）DOM <BR><BR>DOM是Document Object Model文档对像模型的缩写。根据W3C DOM规范（<A href="http://www.w3.org/DOM/" target=_blank>http://www.w3.org/DOM/</A>），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 <BR><BR>(2) ECMAScript <BR><BR>ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（<A href="http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM" target=_blank>http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM</A>）。<BR> </SPAN>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

以上是版主在经典上的代码，这里仅仅是为了自己记忆而留存一份。下面是一个打字效果：

HTML代码

<style>
h3{COLOR: #ffffff; FILTER: glow(color=ef09da,strength=1) dropshadow(color=#00ff00,offx=1, offy=1, positive=2);width:600;text-indent: 2em}
</style>
<body>
<script language=javascript>
var layers =document.layers,style=document.all,both=layers||style,idme=908601;
if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef =
'.style';}
function writeOnText(obj,str){
if(layers)with(document[obj]){ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str');   }
var dispStr=new Array("<h3>天汉是对汉中的美称，汉中市位于陕西省西南部,北依秦岭,南靠巴山，汉江横贯其中，辖汉台、南郑、城固、洋县、西乡、勉县、宁强、略阳、镇巴、留坝、佛坪11个县区，面积2．7万平方公里，人口363．96万人，耕地396万亩，素有西北“小江南”和秦巴“聚宝盆”之美誉。</h3><h3>汉中曾经是商朝的方国，秦国时的汉中郡，此后又是刘邦西汉王朝的发祥地，蜀汉丞相诸葛亮北伐的军事要地，杰出的政治、军事人物张良、韩信、萧何、张鲁、诸葛亮、吴?、吴?等都在汉中留下足迹。汉中也酝育了伟大的外交家张骞，孕育了刚直雄烈的诤臣李固和造纸术的发明者蔡伦。诗人李白、杜甫、陆游也在秦巴山区之间吟唱出彪炳文学史的瑰丽诗章。</h3><h3>悠久而丰富的历史为汉中留下了诸多名胜古迹：被誉为世界交通史，文化史上“奇迹”与“瑰宝”的褒斜栈道，石门及其摩崖石刻，汉刘邦的拜将台及其为汉王时的宫殿遗址古汉台，还有众多的历史名人墓地，祠堂。胜迹历历，史册煌煌，汉中市一九九四年被国务院命为全国历史文化名城。</h3><h3>汉中土地肥沃，气候湿润，盛产水稻，小麦，玉米，薯类及油菜，水果，茶叶，为陕西农业高产区。野生植物3000余种,中药材1300余种,被誉为“天然药库”。动物种类繁多，其中大熊猫、金丝猴，朱?、羚牛等珍稀保护动物40余种。</h3><h3>汉中是国家批准的开放区，是陕南新兴的经贸旅游中心。宝成、阳安、襄渝三铁路经过境内,民航班机往返西安,公路四通八达,是陕西开发潜力较大的地区之一。汉中自然条件和人文地理与关中差异较大，古代建筑具有南北兼备的风格，民居多样，生活习俗颇具江南风采。在这里端午节赛龙舟，在陕北和关中是看不到的，饮食习俗也与四川接近，巴山的锣鼓草、汉中的瑞公戏、西乡的刺绣挑花都具有浓厚的乡土气息。洋县的黑米和香米，古为贡米，如今行销国内外，成为普通百姓的大众食品。</h3>");
var overMe=0;
function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){
var tmp0=tmp1= '',skip=100;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;idx++;}
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);
if (overMe==0 && plysnd==1){
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()){document.embeds
[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2
+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);}}
function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#0000ff', '#cccccc', 100, 0);}
</script>
<BODY onload=init()>
<DIV class=ttl1 id=ttl0></DIV>
</BODY>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]