CSSとpng画像1つだけで作るグラーデーションテキストエフェクト

これはなかなかいいアイデア。あくまでもテキストはテキストデータとして保持したまま、見た目だけグラデーション。 CSS見れば、「ああ、なるほど」って感じで複雑な事はしていない。発想がキラリです。

元になるhtml

まず、適当な背景色の上に、これまた適当な描画色のテキストを配置。font-sizeは少し大きめの方がわかりやすいかと。

Gradation Text Effect.

html
<p class="gradient_text">Gradation Text Effect.</p>
CSS
.gradient_text{
    background: #000;
    color: #999861;
    font: bold 30px sans-serif;

グラデーション背景用に<span>を追加

<p>タグ内に、空の<span>を追加。

追加した<span>に対してCSSを追加。背景画像を適用。ポイントは<p><span>それぞれのposition

Gradation Text Effect.

html
<p class="gradient_text"><span></span>Gradation Text Effect.</p>
CSS
.gradient_text span {
  background: url('gradient-text-effect.png') repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 30px;
背景画像(透過PNG)

これだけ。

ただし、IE6では普通にやっても透過PNGを透過表示できないので、IE独自実装のAlphaImageLoaderを使わないといけない。
元記事では、さらに応用してストライプ風にしたサンプルや、空の<span>を書きたくない人用にJqueryを利用したサンプルもあります。

このエントリーをはてなブックマークに追加
はてなブックマーク - CSSとpng画像1つだけで作るグラーデーションテキストエフェクト
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]