« サイトの画像を簡単に保存させたくない場合 | トップページ | サンプルがダウンロードできない方へ »

2008.09.15

透過PNGを使ってテキストにグラデーション

画像を使わなくてもグラデーションくらいなら…|web creators 2008年10月

今回もweb creators 10月号の「使えるCSS デザインの技152」から、ちょっとした小技です。

「SEOに配慮して、h1などの見出しに画像を使わずテキストのまま組んで欲しい」といった要望が最近までちょこちょことありました。(※ほとんど最近は、画像を背景にして、テキストをtext-indent: -9999px; として表示エリア外にとばしていますが)
そんな時、テキストの上に透過PNGを重ねてしまえば、画像を使わなくてもグラデーション効果が得られるというのが今回の小技です。

実際、画像を作った方がキレイですし、テキストに透過PNGを重ねるだけでは凝った効果を加えるコトもできないので、使う機会は限られると思いますが、とりあえずサンプルです。

↑このデータはこちらからダウンロードできます。

仕組みはとても簡単です。
例えば、
<h1 lang="en" class="gimg"><span class="alphafilter"></span>GRADATION</h1>
…というように、テキストの前にspan要素を記述して、そのspan要素の背景画像として透過PNGを指定し、絶対配置でテキストの上に重なるようにしてあげればOKです。

なお、IE6は透過PNGに対応していないので、適当なJavaScript等を利用して下さい。ちなみにサンプルでは、to-Rさんの「アルファ画像を扱うalphafilter.jsライブラリ」を利用しています。(該当する要素にclass="alphafilter" と記述するだけなので、とても重宝しています)

|

« サイトの画像を簡単に保存させたくない場合 | トップページ | サンプルがダウンロードできない方へ »

コメント

こんにちは、おせうです。

ランキングから訪問しました。
グラデーション勉強になりました。

これからもお勉強にこさせて
いただければと思います。

よろしくお願いいたします♪
私のブログにも是非お立ち寄り
下さいませペコm(_ _;m)

応援ぽくちん♪

投稿: 【Ambitous!!】おせう | 2008.09.22 09:36

おせうさん、コメントありがとうございます。

これからも役立ちそうなモノを載せていきますので、またよろしくお願いします!

投稿: exyz | 2008.09.22 13:05

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/42474162

この記事へのトラックバック一覧です: 透過PNGを使ってテキストにグラデーション:

« サイトの画像を簡単に保存させたくない場合 | トップページ | サンプルがダウンロードできない方へ »