百度空间 | 百度首页 
               
 
查看文章
 
文字及图片处理包括(滚动字效果,发光字,大小写,滤镜,及图片加滚动条处理
2008年09月02日 星期二 11:01

1,
<FONT style="FONT-WEIGHT:bolder; FONT-SIZE: 50px; FILTER: blur(add=1,direction=45,strength=10); WIDTH: 500px;POSITION: relative"><P><FONT color=#ff0000>傻逼的执著于虚荣容易让狗迷失</FONT></P></FONT>

A: 将正常文字缩小一半尺寸后大写显示

style="font-variant: small-caps"

B:控制字母大小写

style="text-transform: uppercase"

1> uppercase 使所有字母大写显示,
例:
This sentence serves as an example.
2>lowercase使所有字母小写显示,
例:
This sentence serves as an example.
3> capitalize 使每个单词的第1个字母大写显示,例:
This sentence serves as an example.
4>none 使所有继承的文字变形参数被忽略,文字将以正常形式显示。
例:
This sentence serves as an example.

(注意:IE 3不支持文字变形)

2、上下移动字体
代码:<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=7>
<B>朋友,欢迎您的到来~~~~</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=7>
<B>朋友,欢迎您的到来~~~~</FONT></CENTER></B></MARQUEE>

3、左右移动字体
代码:<MARQUEE style="WIDTH:
226px; HEIGHT: 50px" width=226 height=50><STRONG>
<FONT size=6><FONT face=楷体_GB2312 color=#9400d3>
傻逼的执著于虚荣容易让狗迷失</FONT></FONT></STRONG></MARQUEE>
<FONT face=幼圆 size=5>
<MARQUEE style="WIDTH: 220px; HEIGHT: 50px" direction=
right width=220 height=50><STRONG><FONT face=楷体_GB2312><FONT color=#9400d3 size=6>傻逼的执著于虚荣容易让狗迷失</FONT></STRONG></FONT></MARQUEE>

4、大段字上移效果
代码:<P align=center>
<MARQUEE scrollAmount=2 direction=up height=500>
<CENTER><FONT face=隶书 color=#008000 size=4><B>
<B>地上本来没有路<BR>走的人多了<BR>便成了路<BR>只要有了路<BR>就有探索的脚步<BR>~~~~~~~~~~<BR>漫步人生路<BR>几多风雨<BR>几度春秋<BR>往事可以忘却<BR>却忘不了<BR>走过的那段路<BR>回忆可以淡忘<BR>那段路却留在了<BR>心灵的深处<BR>~~~~~~~~~~<BR>漫步人生路<BR>关键的时刻<BR>往往只有几步<BR>尤其是在<BR>人生的岔道口<BR>朋友<BR>你千万把握住!<BR>只要选定了<BR>这条路<BR>就无怨无悔地<BR>朝前走!<BR>~~~~~~~~~~<BR>漫步人生路<BR>斑斓会出现<BR>坎坷也会有<BR>但是要明白:<BR>彩虹是在风雨后<BR>~~~~~~~~~~<BR>漫步人生路<BR>情长长<BR>路漫漫<BR>回头已经没有岸<BR>只需知己<BR>相依相伴<BR>快快乐乐每一天<BR>携手走向<BR>那幸福的港湾<BR>~~~~~~~~~~<BR>漫步人生路<BR>路象一条船<BR>驶向天涯海角<BR>驶向辉煌的彼岸<BR>一路走来<BR>可别忘了<BR>收藏旅途的<BR>点点滴滴喜和忧<BR>留到晚年<BR>坐着轮椅<BR>和亲朋好友<BR>慢慢聊啊<BR>慢慢地聊....<BR>~~~~~~~~~~</B></FONT></CENTER></MARQUEE></P>


注意说明:
1、制文字移动速度的代码为scrollAmount=3,后面的数值越大则移动的速度越快,可以通过改变数值来控制文字的移动速度。
2、第四个特效的文字移动字幕高度可以通过height=500后面的数值来调整,如果嫌字幕太高,可以把数值调小即可。目前演示的这个效果是200,各位可做参照。
3、文字的颜色通过“color=#336699”这个类似代码来调整,后面的六位数字代码为颜色代码,如果有颜色取色器则能很方便的得到颜色的代码,直接输入即可。这个是文字的字体(face=隶书),通过修改后面的汉字可以改变文字的字体,比如华文行楷、华文彩云等等。size=4这个代码是文字的字体,通过改变后面的数值来改变文字的大小;direction=up 这个代码是文字移动的方向,up为向上,left为向左,right为向右,down为向下。

以下是发光字体代码:
</textarea><table style="FILTER: glow(color=发光背景颜色代码,direction=2)"><font color=发光字体颜色代码>要设置的文字</font></table>

例1:
<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#4A7AC9,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
例2:
<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>

以下是阴影以及投射文字的效果:

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#4A7AC9,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果&nbsp;&nbsp;</FONT>

图片处理
1,制作跳动的图片
代码:<MARQUEE scrollAmount=5 direction=right behavior=alternate>
<MARQUEE direction=up behavior=alternate width=500 height=250><IMG src="图片连接的URL地址"></IMG></MARQUEE></MARQUEE>

代码说明:代码里中文的部分是图片的URL地址,代码中黄色的部分是控制图片上升的速度的,值越大则越快。代码中橙色的部分是调整图片活动范围的。

2,在图片上添加滚动条

<TABLE cellSpacing=0 width="100%" border=0>
<TBODY>
<TR>
<TD></TD></TR>
<TR>
<TD>
<DIV align=center>
:<TABLE cellSpacing=0 width="100%" border=0>
<TBODY>
<TR>
<TD></TD></TR>
<TR>
<TD>
<DIV align=center>
<TABLE height=250 cellSpacing=0 cellPadding=0 width=425 background=http://bbs.sk66.net/UploadFile/2005-12/200512214145429.gif border=10 bordercolor=#FF3399>
<TBODY>
<TR>
<TD width=25 colSpan=3 height=6></TD></TR>
<TR>
<TD width=469 height=238></TD>
<TD width=250 height=238>
<DIV style="SCROLLBAR-FACE-COLOR: #bbf900; FONT-SIZE: 11px; SCROLLBAR-HIGHLIGHT-COLOR: #dcff71; OVERFLOW: auto; WIDTH: 250px; SCROLLBAR-SHADOW-COLOR: #bbf900; COLOR: #bbf900; SCROLLBAR-3DLIGHT-COLOR: #bbf900; SCROLLBAR-ARROW-COLOR: #009900; FONT-FAMILY: Verdana, Tahoma, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #9dcd0a; HEIGHT: 238px">
<P align=center> </P>
<P align=center><B><font size="5">回归恬静</font></B></P>
<P align=center></P>
<P align=center><B><FONT color=#61b713 size="4" 青锋</FONT></B></P>
<DIV align=center><font color="#FFFF00"><FONT face=楷体_GB2312 size=4>翻开久合的诗集<BR>独个儿沉浸于,</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 size=4>这自我的空间里。<BR>清茶一杯,</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 size=4>浅呷轻尝, <BR>细味人生的苦涩与幽香。 <BR>       <BR>静望那如华的夜空, <BR>不经意,</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 size=4>又想起了久违的你。 <BR>思绪间,<BR>再度泛起隐约的波澜。 <BR><BR>不得已的重温,<BR>潮漉了早已干枯的心田, <BR>爬绿了久旱的防堤。<BR>但,梦终究是梦----- <BR>       <BR>走出那醉人的梦乡<BR>驿动的心,</FONT></DIV>
<DIV align=center><FONT face=楷体_GB2312 size=4>回归恬静。<BR>把哀伤暗暗地藏匿, <BR>于笔底下,</FONT></DIV>
<DIV align=center><FONT size=6><FONT face=楷体_GB2312 size=4>字行间</FONT>。</FONT></font></DIV></DIV></TD>
<TD width=6 height=238></TD></TR>
</TBODY></TABLE></DIV>
<DIV align=center></DIV></TD></TR></TBODY></TABLE></DIV>

滤镜

1、alpha滤镜的使用
代码:<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: alpha(opacity=100,style=2); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>alpha滤镜文字的使用<br>
</FONT></P>

2、Blur滤镜的使用
代码:<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: blur(add=1,direction=30,strength=5); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
Blur滤镜文字的使用
</FONT></P>



3、 shadow滤镜的使用
代码:<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: shadow(color=black,direction=180); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
shadow滤镜文字的使用</FONT></P>


4、dropshadow滤镜的使用
代码:<P align=center>
<FONT style="FONT-SIZE: 25pt; filter: dropshadow(color=lightred,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
dropshadow滤镜文字的使用
</FONT></P>


5、wave滤镜的使用
代码1不加倒影:<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
wave滤镜文字的使用
</FONT></P>


代码2,加倒影:<P align=center>
<FONT style="FONT-SIZE: 30pt; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 方正舒体">wave滤镜文字的使用</FONT>
<FONT style="FONT-SIZE: 30pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30) flipv; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
wave滤镜文字的使用
</FONT></P>


6、glow滤镜的使用
代码:<P align=center>
<FONT style="FONT-SIZE: 30pt; filter: glow(color=gray,strength=4); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
glow滤镜文字的使用<br>glow滤镜文字的使用<br>
</FONT></P>


7、FlipV滤镜的使用
代码:<P align=center>
<FONT style="FONT-SIZE: 30pt; WIDTH: 100%; COLOR: red; FONT-FAMILY: 方正舒体">
FlipV滤镜文字的使用
<FONT style="FONT-SIZE: 30pt; filter: FlipV; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">
FlipV滤镜文字的使用
</FONT></FONT><br>
</P>


8、chroma滤镜的使用
代码:<TABLE align=center cellpadding=0 cellspacing=0    background=http://nxm.16789.net/s-helpSite/domName/nxm/2004121215594122335.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699">
<TABLE align=center bgcolor=#000000>
<TBODY>
<TR>
<TD align=middle>
<FONT style="FONT-SIZE: 30pt" face=黑体 color=#336699><b>chroma滤镜的使用</b></FONT>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


9、竖版文字。
代码:<P align=center></P>
<DIV style="WIDTH: 150px; WRITING-MODE: tb-rl">
<DIV align=left><FONT style="FONT-SIZE: 24pt; FILTER: shadow(color=#472600); WIDTH: 100%; COLOR: #00ff40; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书">门泊东吴万里船<BR>窗含西岭千秋雪<BR>一行白鹭上晴天<BR>两个黄鹂鸣翠柳<BR><BR></FONT>


注意说明:
1、“FONT style="FONT-SIZE: 24pt;”是文字的大小。
2、“FONT-FAMILY: 隶书”这个是字体。
3、“<DIV style="WIDTH: 150px; WRITING-MODE: tb-rl">”这是竖板字的代码,加上这个代码后就能竖着排版了。


类别:Css | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu