ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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

ピクチャ 9 06-20-25

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

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

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

Css Gradient Text - By Web Designer Wall

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

Entrance11-1

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

CSS Gradient Text Effect

 http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2