超技!! 激軽！スペシャルバナー作成法

ちょっとずるいような気がするかもしれませんが、上記バナーは全て１つの同じファイルです。元となっている画像は、背景色が透過されています。下記のものがそれです。わかりやすいようにいくつかの背景色の上に置いてみました。

この画像にスタイルシートのフィルター効果を加えています。この場合は、Gradientフィルターを加えていますので、つまりＩＥ5.5以上、OSはWindowsのみにしか表示されないということになります。しかし、あの色数で465バイトというのはかなりおいしいのではないでしょうか？他ブラウザへの対応も考えるのであれば、背景色を色々想定して、どの色でもきちんと見えるような色でバナーを作成すればそれですんでしまいます。

ではどのように記述すればよいのか？　という事になりますが、それはWebToolにあるフィルターチェンジャーを利用してください。ここで紹介したものの他にもたくさんのフィルター効果があります。ただ見ているだけでも楽しいですよ。また、このフィルターを利用し、更にTIMEを融合させればもっとすごいことができます。基本的にはこうなります。

<img src="バナーのURL" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=lightyellow,endColorStr=sandybrown); width:88;height:31;boder:0;">

画像の縦横のサイズ、枠線の太さの指定ですが、ここで書かれているようにスタイルシートでサイズ指定することをお勧めします。フィルター効果の中には、ポジション指定、もしくはサイズの指定がされていないと表示されないものがいくつかあります。ですので、上のようにスタイルシートでサイズ指定をされた方がよいでしょう。