hxタグ内に記述したテキストにグラーデーションをかける方法

今日は一つ面白い手法を紹介。
グラデーション様の画像を一つ作るだけで、全てのテキストにグラデーションをかける事ができるので便利。

１．白と透明のグラデーション画像を作成（5px×20px）h_gradation.png

２．下記のCSSを設定。
h2 span{
height: 20px;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: url('/images/h_gradation.png') repeat-x 0 0;
}
* html h2 span{ /*ie6対策*/
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/h_gradation.png', sizingMethod='scale');
}

３．h2タグの中にブランクのspanタグを入れる
例：<h2>東京のソメイヨシノ<span></span></h2>