楼主: caixiao

用CSS滤镜组合制作艺术字体

[复制链接]
 楼主| 发表于 2006-5-16 09:40 | 显示全部楼层
感兴趣的朋友可以试试
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-16 09:45 | 显示全部楼层
用代码制作蜡烛
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff0000)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-16 09:45 | 显示全部楼层
代码
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
</TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff0000)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE>

说明:不管什么颜色的蜡烛,点燃后火焰应该是红黄色的,蜡烛的上部也是黄色的.

要达到这种效果,我们用CSS颜色渐变就可以作到.

火焰的语法里已经用了style="FILTER: alpha(opacity=100,finishopacity=0,style=2)"

那么可以在<td>里使用渐变,即把

style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)"

这一句放在<td>里.

gradientType=0    表示渐变的方向.

0  从上往下渐变

1  从左往右渐变

startColorstr=yellow

渐变开始的颜色

endColorstr=red

渐变结束的颜色
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-16 09:47 | 显示全部楼层

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff0000)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff8c00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ffff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ff8c00 border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#00ff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ffff00 border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#00ffff)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#00ff00 border=0>

回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-16 09:49 | 显示全部楼层
<TABLE cellSpacing=15 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
</TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff0000)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE>
</P>
</TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
</TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff8c00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE>
</P>
</TD>
<TD width="20%"></TD></TR>
<TR>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
</TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ffff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ff8c00 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
</P>
</TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<IMG src="" border=0>
</P>
</TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
</TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#00ff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ffff00 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
</P>
</TD></TR>
<TR>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
</TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#00ffff)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#00ff00 border=0>
<TBODY>
<TR>
代码
<TD>
</TD></TR></TBODY></TABLE>
</P>
</TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
</TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff00ff)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#00ff00 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE>
</P>
</TD>
<TD width="20%">
</TD></TR></TBODY></TABLE>
12.gif
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-16 09:53 | 显示全部楼层
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#FF00FF, endColorstr=#0000FF)"> 祝你生日快乐

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff0000)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff8c00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ffff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ff8c00 border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">
XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#00ff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ffff00 border=0>

XImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)">

回复 支持 反对

使用道具 举报

发表于 2006-5-16 09:54 | 显示全部楼层
楼主,用心啊
很漂亮
是该好好学学[s:5]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-16 09:56 | 显示全部楼层
引用第16楼最爱00522006-05-16 09:54发表的“”:
楼主,用心啊
很漂亮
是该好好学学[s:5]
谢谢鼓励!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-5-16 09:57 | 显示全部楼层
生日快乐代码
<DIV id=table1 style="MARGIN-TOP: 150px; LEFT: -200px; MARGIN-BOTTOM: 150px; WIDTH: 970px; POSITION: relative; TOP: 90px">
<TABLE style="BORDER-RIGHT: #9b0000 16px ridge; BORDER-TOP: #9b0000 16px ridge; LEFT: 0px; BORDER-LEFT: #9b0000 16px ridge; BORDER-BOTTOM: #9b0000 16px ridge; POSITION: relative; TOP: 0px" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#FF00FF, endColorstr=#0000FF)"><FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 150%; FONT-FAMILY: 华文新魏">
<MARQUEE scrollAmount=3 behavior=alternate width="80%">祝你生日快乐</MARQUEE></FONT>
<TABLE cellSpacing=15 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff0000)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></P></TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff8c00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></P></TD>
<TD width="20%"></TD></TR>
<TR>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ffff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ff8c00 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></P></TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center><IMG src="http://bbs.thhome.net/p_w_upload/Mon_0605/6_2501_b2887226b5e4f6b.gif" border=0> </P></TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#00ff00)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#ffff00 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></P></TD></TR>
<TR>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progidXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)"></TD></TR></TBODY></TABLE>

<TABLE style="FILTER: revealTrans progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#00ffff)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#00ff00 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></P></TD>
<TD width="20%"></TD>
<TD width="20%">
< align=center>
<TABLE style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" height=110 cellSpacing=0 cellPadding=0 width=35 align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: revealTrans progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=red)"></TD></TR></TBODY></TABLE>
<TABLE style="FILTER: revealTrans progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=yellow, endColorstr=#ff00ff)" height=160 cellSpacing=0 cellPadding=0 width=40 align=center bgColor=#00ff00 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></P></TD>
<TD width="20%"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
回复 支持 反对

使用道具 举报

发表于 2006-5-16 10:02 | 显示全部楼层
caixiao那图片搞笑哦~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表