CSSのClip属性を利用して多彩な文字を作成する(Multi Colored Text)

げんり

2つの同じ色の異なる文字を重ね合わせ、それぞれにclip属性を付けることで、上と下の文字が切り取られる位置が異なり、2つの異なる色が生成されます.

clip:蘇沈小雨CSSマニュアルより抜粋

clip : auto | rect ( number number number number ) 
 
  ： 
 
auto : 　     
rect ( number number number number ) : 
   - - -             (0,0)           ，
         auto  ，       
 
  ： 
 
            。          。
   position    absolute，       。

テスト環境

Firefox1.5、IE6.0、Opera8.5、IE5.01グリーン版通過.

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>

参考資料:http://www.ibloomstudios.com/article8/
ファイナルエフェクト