文字特殊效果

下面为效果显示

3D Text

This was made using one span with blur and then another one atop of it.

网页特效代码网页特效代码

Glass Text

Same tecnique as above but both have alpha filters added.

7stk.com7stk.com

Inner Shadow

First I added a mask() to remove the inside, then a shadow() was added. Since there is nothing inside the shadow is displayed inside. Then I removed the mask using chroma(). Before this I added the same text with a white color and the second text was moved above this using position: relative; left: -200px;

WebFXWebFX

Outline Text

You could just add glow but it looks better if the glowing is placed on the inside. To do this you add mask, glow and chroma.

WebFX

脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
<!--

body	{background: url(back.gif);}

.sample		{font-style: italic; font-family: arial black;
			font-size: 40px; font-weight: bold; cursor: hand;}

#backgr2 {width: 200px; height: 70; background: black url(images/back1.jpg) center center no-repeat;}
#backgr3	{}

-->
</style>
<div class="webfx-main-body">
<h2>3D Text</h2>

<p>This was made using one span with blur and then another one atop of it.</p>

<p onclick="alert(this.innerHTML)">
<span class="sample"
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
>WebFX</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;">
WebFX</span>
</p>

<h2>Glass Text</h2>

<p>Same tecnique as above but both have alpha filters added.</p>

<p onclick="alert(this.innerHTML)">
<span class="sample"
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);"
>WebFX</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);"
>WebFX</span>
</p>

<h2>Inner Shadow</h2>

<p>First I added a mask() to remove the inside, then a shadow() was added. Since there is nothing inside the shadow
is displayed inside. Then I removed the mask using chroma(). Before this I added the same text with a white color and
the second text was moved above this using position: relative; left: -200px;
</p>

<p onclick="alert(this.innerHTML)">
<span class="sample"
style="width: 200px; height: 70; color: white;"
>WebFX</span><span class="sample"
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);"
>WebFX</span>
</p>

<h2>Outline Text</h2>

<p>You could just add glow but it looks better if the glowing is placed on the inside. To do this
you add mask, glow and chroma.</p>

<p onclick="alert(this.innerHTML)">
<span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);">WebFX</span>
</p>
</div>