Visual Filter

Visual Filterのサンプル集です。対応ブラウザは、Internet Explorer 4.0以降となります。テキストだけで様々な演出ができるので、ページのファイルサイズを抑えつつ、見栄えのよいページを作成することが可能です。ただし、Visual FilterはDirectXを使用して効果を出しているため、効果を演出できる環境は限られてしまいます。その点に注意して使いましょう。これらはDynamicHTMLとして演出すると効果的です。使い方などは、すべてソースを参照してください。

なお、ActiveXを使用しない設定にしている環境ではすべてこれらの処理は無効となるようです。設定の煩雑さで使いどころが難しいものといえます。

Internet Explorer 5.5は環境が壊れてVisual Filterが効かなくなることがあります。その場合、正しく表示できなくなるFilterもあります。Internet Explorer 6.0をインストールしましょう。

"Alpha" Filter

透明処理です。開始透明度と終了透明度をうまく指定すれば、グラデーションとして使うことが出来ます。工夫次第で面白いことができるでしょう。ただしグラデーションとして使う場合には、色数が少ない画面モードで実行した場合に意図せぬ処理が行なわれることがあります。使用する場合には注意しましょう。

<DIV>グラデーションサンプル

ビデオカードのドライバや画面モード（特に色数）によって、なめらかなグラデーションになることと、かなりいい加減なグラデーションになることがあります。同じ会社の製品でも、ドライバのバージョンにかなり影響を受けるので、あまりグラデーションの使用はお薦めできません。グラデーションは調整も大変です。

どちらかというと、純粋に透明度の処理として、JavaScriptと組み合わせたフェードインやフェードアウトなどのDynamicHTMLとして使用したほうがよいでしょう。

"Blur" Filter

ぶれの処理です。かなり簡単に使えるので便利だといえるでしょう。

<DIV>Blur処理サンプル

背景色を指定すると効果がかなり異なって見えるのが、使用する上で気がかりかもしれませんね。

"DropShadow" Filter

影をつけます。相対座標で影の位置を指定します。数値はマイナス値を指定することも可能です。左上のほうに影を付けたい場合は、OffXもOffYもマイナス値を指定することになります。背景色を指定すると、影が付きません。背景色をどうしても付けたい場合は、<DIV>をネストさせてください。

<DIV>DropShadow処理サンプル

スタイルシートとJavaScriptを使用すれば同等のことが実現できますが絶対にやらないように！　HTMLの文書構造を示すという本来の目的から外れて同一語句を意味もなく繰り返し表記してしまうことになるからです。読み上げソフトを使わねばならないような状況を考えてもみてください。そのような表現方法は、かなり迷惑となるのではないでしょうか？

"FlipH" Filter

左右反転です。オプションは一切ありません。

<DIV>FlipH処理サンプル

"FlipV" Filter

上下反転です。オプションは一切ありません。

<DIV>FlipV処理サンプル

"Glow" Filter

グロウ効果をつけます。これにより、色の組み合わせによっては、文字が輝いたり浮かび上がったりするような表現ができます。背景色を指定すると、効果が付きません。背景色をどうしても付けたい場合は、<DIV>をネストさせてください。

<DIV>Glow処理サンプル

"Gray" Filter

グレイスケール処理です。指定されたエレメント（要素）は、すべてモノクロになります。オプションは一切ありません。

<DIV>Gray処理サンプル

サンプルも文字色はほかのフィルター同様、緑を指定しています。グレイスケール処理をされて黒くなっています。

"Invert" Filter

色の反転です。オプションは一切ありません。DynamicHTMLで使うと面白いかもしれませんね。

<DIV>Invert処理サンプル

サンプルも文字色はほかのフィルター同様、緑を指定しています。反転色でピンクになっています。

"Shadow" Filter

影をつけます。DropShadowとは影の効果が異なります。自動的に影がつけられるのでこちらのほうが簡単に使えるでしょう。背景色を指定すると、効果が付きません。背景色をどうしても付けたい場合は、<DIV>をネストさせてください。

<DIV>Shadow処理サンプル

スタイルシートとJavaScriptを使用すれば同等のことが実現できますが絶対にやらないように！　HTMLの文書構造を示すという本来の目的から外れて同一語句を意味もなく繰り返し表記してしまうことになるからです。

"Wave" Filter

ウェーブ処理です。波状にゆがめることができます。あまり強い効果を与えると、さっぱりわからなくなるので調整が難しいフィルタでしょう。DynamicHTMLでPhaseの値を変化させていくと面白いかもしれません。

<DIV>Wave処理サンプル