画像やテキストに表示効果をつけたい
フィルタとは、Internet Explorerが独自に拡張したWebページ上で視覚的なこうかを表現する機能のことで、スタイルシートを利用して提携の書式を記述することで、画像やテキストに特殊効果を設定することができます。 Internet Explerer 4.0以上のブラウザで表示可能なフィルタと、Direct X を必要とし、 Internet Explorer 5.5以上のブラウザで表示可能なフィルタとがありますが、いずれもWindows版のInternet Explorerでのみ動作します。
Direct X とは、Microsoftが開発した、Windows環境でマルチメディア機能を強化するための技術の総称です。この技術によりグラフィックス描画や音声の処理などマシンパワーを必要とする処理が、快適で高速に実現できるようになります。
Windows98以降は標準で搭載されるようになっていますが、Microsoft社のサイトからダウンロードするなどして入手することも可能です。(2003.05.01 現在)
フィルタ名 IE5.5以上 IE4.0以上 備考Alpha ○ ○Blue ○ ×IE4.0のBlurは性質が異なる Chroma ○ ○DropShadow ○ ○Glow ○ ×Emboss ○ ×Engrave ○ ○Maskfilter ○ △IE4.0では、Mask MotionBlur ○ △IE4.0ではBlur Shadow ○ ○Wave ○ ○BasicImage ○ ×fliph × ○BasicImageで表現可能 flipv × ○BasicImageで表現可能 gray × ○BasicImageで表現可能 invert × ○BasicImageで表現可能 xray × ○BasicImageで表現可能
・Internet Explorer 5.5以上
filter:progid:DXImageTransform.Microsoft.フィルタ名.プロパティ
・Internet Exploler 4.0
filter:フィルタ名.プロパティ
フィルタの設定方法は、他のCSSと同様に行います。
・style属性
<Img src="sample.jpg"
style="filter:progid:DXImageTransform.Microsoft.MotionBlue(strangth=50)
widtg=50%">
・style要素
<style type="text/css">
img{
style="filter:progid:DXImageTransform.Microsoft.MotionBlue(strangth=50)
}
</style>
この作例では、JavaScriptを使ってトランジション効果を設定しています。