Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。
仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。
デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。
CSS Gradient Text Effectのデモページ
利点としては、下記のような点が挙げられています。
- テキストなので、ブラウザからのサイズの拡大・縮小が可能。
- 背景画像を変更することで、グラデーションを変更することが可能。
- 見出し画像をいちいち作成する必要がない。
- 数が多い場合、作成時間・帯域の節約になる。
Post on:2008年1月17日
[CSS]テキストにグラデーション効果をつけるスタイルシート…
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介 (more…)
IE6では文字が隠れてしまいますね。
> ゲスト さん
IE 6対策は、デモにある「It works on IE6 too!」という箇所になると思います。
僕のIE 6の環境では綺麗なグラデーションがかかってました。