Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

画像やテキストに表示効果をつけたい

フィルタとは、Internet Explorerが独自に拡張したWebページ上で視覚的なこうかを表現する機能のことで、スタイルシートを利用して提携の書式を記述することで、画像やテキストに特殊効果を設定することができます。 Internet Explerer 4.0以上のブラウザで表示可能なフィルタと、Direct X を必要とし、 Internet Explorer 5.5以上のブラウザで表示可能なフィルタとがありますが、いずれもWindows版のInternet Explorerでのみ動作します。

■ Direct X

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で表現可能

 

■ Filterを使う場合の基本書式

・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>

■ Transition Filter 作例

f0120044.jpg

この作例では、JavaScriptを使ってトランジション効果を設定しています。

<<<戻る
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial