category
サイト構築 -CSS

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

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

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

テキストにグラデーション効果をつけるスタイルシートのイメージ

CSS Gradient Text Effect

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

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

テキストにグラデーション効果をつけるスタイルシートのデモのキャプチャ

CSS Gradient Text Effectのデモページ

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

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

Post on:2008年1月17日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

pligg.com
on 2008年1月18日

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

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

匿名
on 2008年1月18日

IE6では文字が隠れてしまいますね。

コリス
on 2008年1月18日

> ゲスト さん

IE 6対策は、デモにある「It works on IE6 too!」という箇所になると思います。
僕のIE 6の環境では綺麗なグラデーションがかかってました。

ページの先頭へ




© coliss

RSS