[CSS]テキストにグラデーション効果をつけるスタイルシート

Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。

CSS Gradient Text Effect

仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。

デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。

CSS Gradient Text Effectのデモページ

利点としては、下記のような点が挙げられています。

• テキストなので、ブラウザからのサイズの拡大・縮小が可能。
• 背景画像を変更することで、グラデーションを変更することが可能。
• 見出し画像をいちいち作成する必要がない。
• 数が多い場合、作成時間・帯域の節約になる。