『CSS「background-clip」を使って、背景画像をテキストで切り抜き』の（２）です。「background-clip:text」で切り抜いた背景画像にシャドウを付けてタイトルなどに使えるようにしたサンプルです。

テキストは同じものを2つ用意し、下側をシャドウ専用、上側を切り抜き専用にし重ねています。また、背景画像はパターンを使っています。切り抜きは画像に見えますが、テキストですので、選択やコピーが可能です。

なお、web-kitブラウザ用ですので、Safari、Google Chrom、Lunascape、Sleipnirなどでご覧下さい。

htmlソース

<div id="t-wrapper">
	<div id="lower">WEB受注システム<br><span class="big">百万石</span></div>
	<div id="upper">WEB受注システム<br><span class="big">百万石</span></div>
</div>

CSSソース

div#upper,div#lower {
	width: 800px;
	text-align: center;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", 
	"MS PGothic", sans-serif;
	line-height: 1.4;
	font-size: 90px;
	font-weight: bold;
	position: absolute;
	top: 15px;
	}
div#upper {
	color: rgba(255,255,255,0); 
	background-image: url(../img3/bg-6x6ex.gif);  
	-webkit-background-clip: text;
	z-index: 100;
	}
div#lower {
	text-shadow: 3px 3px 12px #000;
	}