设为首页
加入收藏
用户登陆
特效首页
素材首页
网页特效
特效推荐
设计欣赏
英文字体
中文字体
学习论坛
站 内 搜 索
热门关键字：
表格
超链接
漂浮
跟随
旋转
闪烁
日期
艺术字
滚动
点击
关联菜单
弹出
随机
网页特效分类
鼠标特效
页面特效
背景特效
导航菜单
状态栏类
文本特效
链接特效
图形特效
窗口特效
按钮特效
时间日期
系统相关
计数转换
游戏娱乐
黑客性质
代码生成
综合特效
CSS相关
网页特效分类
>>
CSS相关
用CSS设计艺术字集锦（二）
[ 发布者：肥鱼 | 来源：本站整理 | 时间：2006-5-11 | 浏览： 人次 ]
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效代码|JcwCn.Com|---用CSS设计艺术字集锦（二）</title> <STYLE type=text/css>.title_1 { FONT-SIZE: 12px; FILTER: DropShadow(Color=#213C63, OffX=1, OffY=1); WIDTH: 100%; COLOR: #e1e4ec; FONT-FAMILY: "Verdana" } .text { FONT-SIZE: 12px; COLOR: #666699; LINE-HEIGHT: 16px; FONT-FAMILY: "Verdana"; TEXT-DECORATION: none } .unnamed1 { FILTER: DropShadow(Color=#FFFFFF, OffX=1, OffY=1) } </STYLE> </head> <body> <TABLE cellSpacing=1 cellPadding=0 width=500 align=center bgColor=#8c96b5 border=0> <TBODY> <TR> <TD bgColor=#ffffff> <TABLE cellSpacing=1 borderColorDark=#ffffff cellPadding=0 width="100%" borderColorLight=#000000 border=0> <TBODY> <TR bgColor=#8c96b5> <TD width="100%" bgColor=#8c96b5 colSpan=2 height=16> <DIV class=title_1 align=center>..:: 巧用CSS制作艺术字 ::..</DIV></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text>如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。</TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD style="FILTER: blur(direction=135,strength=8)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR>用blur滤镜做出的效果，代码如下：<BR><B>FILTER: blur(direction=135,strength=8)</B></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR>用dropshadow滤镜做出的效果，代码如下：<BR><B>FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)</B></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD style="FILTER: glow(color=#B4BBCF,strength=5)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR>用glow滤镜做出的效果，代码如下：<BR><B>FILTER: glow(color=#B4BBCF,strength=5)</B></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR>这个效果用到了两种滤镜：shadow和alpha，代码如下：<BR><B>FILTER: alpha(opacity=100,finishiopacity=0,style=1)<BR>shadow(color=#8C96B5,direction=135)</B> </TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR>这个效果也用到两个滤镜mask和shadow，代码如下：<BR><B>FILTER: mask(color=#E1E4EC)<BR>shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)</B><BR><BR>注意：mask的颜色要和网页背景色一致，字体的颜色由shadow决定。</TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR>如果说上面的效果是阴文的话，那么这个效果的应该算是阳文了，用两个滤镜实现mask和dropshadow，注意mask的颜色要和网页背景色一致，或者把mask和chroma成对使用，也可达到同样效果。代码如下：<BR><B>FILTER: mask(color=#E1E4EC)<BR>dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)<BR>chroma(color=#E1E4EC)"</B> </TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE class=unnamed1 cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=50 width=200 align=center border=0> <TBODY> <TR> <TD style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align=middle><FONT face=黑体 color=#e1e4ec size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR>用glow滤镜可以做空心字，方法是将字体颜色设置为背景色，再将glow滤镜的strenght的值设置为1或2即可。这个效果的代码如下：<BR><B>FILTER: glow(color=#8C96B5,strength=2)<BR>shadow(color=#B4BBCF,direction=135)</B> </TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> <TABLE cellSpacing=8 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=text> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align=middle><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR><BR> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align=middle height=54><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE><BR><BR> <TABLE height=150 width=200 align=center background="" border=0> <TBODY> <TR> <TD style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align=middle height=54><FONT face=黑体 color=#8c96b5 size=6><B><I>E流设计</I></B></FONT></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD class=unnamed1><FONT class=text>如果背景采用图片，为了能达到满意的效果需要将mask和chroma组合使用，这样能使字体感觉是透明的，让背景透出来。<BR><BR>上面列出的效果前者的代码是：<BR><B>FILTER: mask(color=#E1E4EC)<BR>shadow(color=#B4BBCF,direction=135)<BR>chroma(color=#E1E4EC)</B><BR>注意：字体的颜色由shadow决定，mask和chroma的颜色要相同，色彩任意。<BR><BR>中间的代码是：<BR><B>FILTER: glow(strength=1)<BR>mask(color=#B4BBCF)<BR>chroma(color=#B4BBCF)</B><BR>注意：mask和chroma的颜色相同，这个颜色决定了字体的颜色。<BR><BR>后者的代码是：<BR><B>FILTER: mask(color=#E1E4EC)<BR>dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)<BR>chroma(color=#E1E4EC)</B><BR>注意：mask和chroma的颜色相同，色彩由dropshadow决定。</FONT></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD bgColor=#e1e4ec> </TD></TR></TBODY></TABLE></body> </html>
本 类 相 关 特 效
用CSS控制滚动条样式
微软风格的按钮
用层模拟的小窗口(可拖动...
CSS仿淘宝首页导航条按钮...
用CSS设计艺术字
用CSS实现的实用目录树
CSS 制作的三级菜单
文本框的用横线表示
绝妙CSS效果-特色按钮
相 关 评 论 / 报 错 (1)
评论人：☆爺☆ 时间：2006-6-21
艺术字
CopyRight © 2006
JcwCn.Com
All Rights Reserved
网页特效代码 | SC v2.0 Designed By JcwCn 有任何问题请与
站长联系
