filter：画像・テキストにフィルタ効果を与える

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

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

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

filter: alpha();

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

filter: blur();

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

filter: chroma();

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

filter: glow();

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

filter: dropshadow();

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

filter: shadow();

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

filter: fliph();

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

filter: flipv();

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

filter: gray();

グレースケール（白黒）で表示します。

filter: invert();

色を反転表示します。

filter: mask();

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

filter: wave();

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

filter: xray();

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