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

CSS Gradient Text Effect

CSS Gradient Text Effect
[情報元:[CSS]テキストにグラデーション効果をつけるスタイルシート (コリス)]

画像を作ることなく、テキストにグラデーション効果を与えるCSSテクニックが紹介されています。

サンプルを見ると、HTMLには見出し要素の中に空の<span>を記述しておき、CSSにはグラデーション効果のある背景画像を設定してあるようです。

◇HTML

<h1><span></span>見出しタイトル</h1>

◇CSS

.gradient1 h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

画像を作るほどではないけれども、もう少し見栄えをよくしたい、というようなときに使えそうです。また、見出し要素が普通のテキストのままでよくなるため、少しでもSEO効果を期待したい場合には便利かもしれません。他にも以下のようなメリットが挙げられています。

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

実際にどのように表示されるかのデモページの他、サンプルファイルもダウンロードできるので、どうなっているかが勉強しやすくなっています。

▼スポンサードリンク

Posted at 2008年01月18日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
1つ後の記事:【再検証】USBメモリ読み書き速度
1つ前の記事:女性向けのブログ記事ネタを提供するサイト『たねブロ』














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/193-bb627fef
この記事にトラックバックする(FC2ブログユーザー)
Home