Creating colorful text with CSS clip attributes

Principle

Two identical and different colors of the text together, by adding clip attributes, so that the above and below the text is cut position different, resulting in two different colors.

Clip: Excerpt from the Su Shen light rain CSS manual clip : auto | rect ( number number number number )
参数：
auto : 　对象无剪切
rect ( number number number number ) :
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切
说明：
检索或设置对象的可视区域。区域外的部分是透明的。
必须将position的值设为absolute，此属性方可使用。 test environment

Firefox1.5, IE6.0, Opera8.5, IE5.01 Green Edition passed.

Css

　　以下是引用片段：
　　 .textBottom {
　　 color: #333333;
　　 position: absolute;
　　 left: 3em;
　　 top: 1em;
　　 font: 26px Century Gothic,Arial, Helvetica, sans-serif;
　　 clip: rect(18px auto auto auto);
　　 }
　　 .textTop {
　　 color: #CC0000;
　　 position: absolute;
　　 left: 3em;
　　 top: 1em;
　　 font: 26px Century Gothic,Arial, Helvetica, sans-serif;
　　 clip: rect(0 auto 18px 0);
}
　　 .container {
　　 width: 28em;
　　 height: 5em;
　　 margin: 1em auto;
　　 position: relative;
　　 background: #F6F6F6;
}

Xhtml

以下是引用片段：
<div class="container">
<a href="#" class="textTop">Cascading Style Sheet </a>
<a href="#" class="textBottom">Cascading Style Sheet </a>
</div>