【-webkit-background-clip】文字にグラデーションをかける【ie非対応】

■ポイント
・-webkit-background-clip:text;文字で背景色を切り抜く
・バックグラウンドにグラデーションをかける
・IE非対応なので、ハックで通常のカラーを代替で指定する事

■HTML

<div id="demo">
デモ
</div>

■CSS

#demo {
	width:600px;
	height:400px;
	margin:0 auto;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	background: rgb(208,228,247);　/* 背景にグラデーションをかける */
　　　　　background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%);
　　　　　background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
　　　　　background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
　　　　　filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 );
	-webkit-background-clip:text;　/* テキストで背景色を切り抜く */
	color:transparent;　/* クリップ文字で背景を抜いたとき、背景色が見えるよう透過にする */
}

■参考：アイデア次第で効果的な使い方ができるかも!?「background-clip:text;」を使って背景画像を文字でマスクする方法CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新）