filter 【フィルタ効果】

[IE5] [IE6] [IE7]

filterプロパティは、画像やテキストに様々な効果を与える事が出来ます。
filterプロパティは、Internet Explorerが独自に追加したプロパティです。

フィルタ効果には、静的なものが18種類、動的なものが17種類あります。しかし、対応していないブラウザではレイアウトが崩れたり、バグの原因になってしまうものなどがあり、実用するにはあまり現実的ではありません。どうしても使いたい効果がある場合は、JavaScriptで同じようなものがないか調べた方がいいのかも知れませんね。あくまでオプション的に使いましょう。

divやspanにfilterプロパティを指定する際には、widthプロパティとheightプロパティを合わせて指定しましょう。

alpha()
透明、半透明、透明グラデーションにします。
・style=0,1,2,3：透明グラデーションのスタイル(0=指定なし、1=線形、2=円形、3=方形)
・startx=数値, starty=数値, finishx=数値, finishy=数値：透明グラデーションの領域
・opacity=0～100；開始透明度の指定(0～100)の範囲で指定
・finishopacity=0～100：終了透明度の指定(0～100)の範囲で指定

blur()
ブレたようにぼかして表示します。
・add=0(false)、1(true)：効果を与えた後の要素と元要素を重ねて表示するか否かを指定
・direction=角度：影の方向を時計回りに角度で指定します。
・strength=数値：ブレの強さを指定します。

chroma()
特定の色を透明にします。
・color=色：透明にする色を指定します。

glow()
文字に光彩を付けて表示します。
・color=色：色の指定
・strength=数値：長さの指定

dropshadow()
文字にぼかしのない影をつけます。
・color=色：影の色を指定します。
・offx=数値, offy=数値：影を表示するX座標とY座標の距離を指定します。
・positive=0(false)、1(true)：影以外の部分の透明・不透明を反転指定。

shadow()
テキストにぼかしありの影をつけます。
・color=色：色の指定
・direction=角度：影の方向を時計回りに角度で指定します。

fliph()
左右反転にして表示します。

flipv()
上下反転にして表示します。

gray()
グレースケール(白黒)で表示します。

invert()
色を反転表示します。

mask()
マスキングして表示されます。透明部分を指定色で塗りつぶしたり、不透明の部分を透明にします。

wave()
波状に揺らして表示します。
add=0(false)、1(true)：効果を与えた後の要素と元要素を重ねて表示するか否かを指定
freq=数値：波の数を指定
lightstrength=0～100：光の強さを指定
phase=0～360：波の開始位置を指定
strength=数値：波の強さを指定

xray()
グレースケールにして明度を反転させた状態で表示します。X線を当てた時のような効果です。

filterプロパティの記述の仕方
<div style=" filter: 効果の種類(値); width: ***px; height: ***px;">内容</div>