テキストにグラデーション効果をつける

タイトルやキャプションがテキストだけで味気ない、でもページの数だけ画像を作るのは面倒だ。という場合には役に立つテクニックです。

HTML記述

 
<h1><span></span>CSS Gradient Text</h1>
 

CSS記述

h1要素にspanの背景画像を重ねるという手法です。

 
h1 {
    font: bold 330%/100% "Lucida Grande";
    position: relative;
    color: #464646;
}
 
h1 span {
    background: url(gradient.png) repeat-x;
    position: absolute;
    display: block;
    width: 100%;
    height: 31px;
}
 

サンプル

IE6に対応

DirectXのAlphaImageLoaderを使って表示すれば、IE6でも表示されます。

 
* html h1 span {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod=scale);
}
 

IE6に対応したサンプル

ブラウザからフォントサイズの拡大・縮小もできるし、グラデーションを変更したい時、画像を1つ作るだけで、すべてのタイトルに反映させられるなどメリットはたくさんあるテクニックだと思います。ただ装飾の為だけにHTMLを追加するのは、HTML本来の意義（文章構造を記述する為の言語）に反するものなので、検討されてから使用した方がいいと思います。