CSS to make 3D text effects

CSS Immortal Classic -3d Text special effects-This is to use a paragraph of white text, then add the mask () filter, and then use the shadow () filter, and finally add chroma () filter to form a paragraph after the font, placed in the previous paragraph of the relative left: -200px position formed.

Effect: see fig. 1

Source:

<style type= "Text/css" >
<!--
. sample
Font-style:italic; Font-family:arial black;font-size:40px; Font-weight:bold; Cursor:hand;
-->
</style>
&LT;TITLE&GT;CSS Immortal Classic -3d text effects </title>
<div>
<p> below is an overlay effect with the blur filter and the other useless </p>
<p onclick= "alert (this.innerhtml)" > <span class= "Sample"
Style= "width:200px; height:70; Color:black; Filter:blur (Add=0, direction=135, strength=10); "
>ttop.cn</span><span class= "Sample"
Style= "position:relative; Left:-201; Top:-15; width:200; Color: #2984ff; >
Ttop.cn</span> </p>
<p> This is two with an alpha filter effect </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);
>ttop.cn</span><span class= "Sample"
Style= "position:relative; Left:-201; Top:-15; width:200; Color:lightskyblue; Filter:alpha (opacity=60); "
>Ttop.cn</span> </p>
<p> This is to use a piece of white text, then add the mask () filter, and then use the shadow () filter, and finally add the chroma () filter to form a paragraph after the font, placed in the relative left of the previous text:
Formed on the -200px position. </p>
<p onclick= "alert (this.innerhtml)" > <span class= "Sample"
Style= "width:200px; height:70; Color:white; "
>ttop.cn</span><span class= "Sample"
Style= "width:200px; height:70; position:relative; Left:-200; Filter:mask (color=red) Shadow (direction=135) chroma (color=red);
>Ttop.cn</span> </p>
<p> with mask, glow and chroma three filters combined action </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); >Ttop.cn</span> </p>
The perfect combination of <p onclick= "alert (this.innerhtml)" > <span class= "Sample"
Style= "width:320px; height:70; Color:black; Filter:blur (Add=0, direction=135, strength=10); "
><marquee width:300 height:70 scrollamount= "1" behavior= "alternate" class= "Sample" >www. Ttop.cn</marquee></span>
<span class= "Sample"
Style= "position:relative; Left:-320; Top:-15; width:320; Color: #2984ff; >
<marquee width:320 height:70 scrollamount= "1" behavior= "alternate" class= "Sample" >www. Ttop.cn</marquee></span> </p>
</div>

Fig. 1: