MOONGIFT

CSS+画像でグラデーション「CSS Gradient Text Effect」

タグ: [デザイン] [フリーウェア] [CSS] [画像] [Firefox] [IE] [Web]

ソフトウェアと言えるかどうか不明だが、とても格好いいのでご紹介。

最近のサイトの特徴として、グラデーションを使ったクールな印象があげられる。ヘッダーなどのインパクトを与える文字にグラデーションを使ったサイトも良く見かけるだろう。

文字にグラデーションを適用するには画像を使うのが一番手軽だが、文字列を選択してコピーできないという問題があった。その問題を解消するのがこのソフトウェアだ。

今回紹介するフリーウェアはCSS Gradient Text Effect、CSSによるテキストグラデーションだ。CSSなのでソースは見られるが、ライセンスは明記されていないのでご注意いただきたい。

公式サイトにアクセスすれば、何を言わんかというのはすぐに理解してもらえると思う。テキストにグラデーションがかかっている。これは文字列に対して、半透明のPNG画像を重ねることで実現している。

Firefox、Operaであれば問題ないように仕上がっている。IE6では半透明PNGを表示するのに問題があるため、表示が乱れてしまう。が、トリックを一つ挟むことで、IE6でも対応するようにもできるようだ。

テキストグラデーションは見た目の印象がとても良い。が、作成が面倒だったり、再利用が容易でなかったりする。CSS Gradient Text Effectを使えばそうした問題は解消されるだろう。

CSS Gradient Text Effect
　http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

トラックバック URL :

January 23rd, 2008 Posted by admin | 1コメント