filter: 〜フィルタ効果〜 ;

• 画像やテキストにさまざまな効果をあたえることができる。　[IE4〜のみ]
• filter:progid:DXImageTransform.Microsoft. 〜 ; より、表示速度が多少遅い。

• <DIV>、<SPAN>　に適用する場合、
  position:absolute; や、width: 〜 ;height: 〜 ; を指定しないと、効果は適用されない。

• ボックスの範囲外に及んだ効果は表示されない。
• フィルタ効果をすべて表示できるようにボックスの範囲を広めに設定しておく必要がある。
  （paddingで余白を取ったブロック要素にフィルタ効果を指定して囲むなど）

filter:alpha();

• 透明・半透明・透明グラデーションを指定できる。
• IE 5.5 〜 DirectX で使用できる Alphaフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• opacity=
  • 開始透明度を0（透明）〜100（不透明）の範囲で指定。
• finishopacity=
  • 終了透明度を0（透明）〜100（不透明）の範囲で指定。
• style=
  • 透明グラデーションのスタイルを指定。
  • 0　（デフォルト　指定なし）　1　（線形）　2　（円形）　3　（長方形）
• startx=
  • 透明グラデーションの開始地点のx座標を指定。
• starty=
  • 透明グラデーションの開始地点のy座標を指定。
• finishx=
  • 透明グラデーションの終了地点のx座標を指定。
• finishy=
  • 透明グラデーションの終了地点のy座標を指定。
• enabled=
  • 0 （false　フィルタを実行しない）
  • 1 （true　フィルタを実行　デフォルト）

使用例

<IMG src="girl.gif" alt="サンプル１" width="100" height="100"
style="filter:alpha(opacity=50);-moz-opacity:0.5;">

<IMG src="girl.gif" alt="サンプル２" width="100" height="100"
style="filter:alpha(opacity=0,finishopacity=100,style=1);">

<IMG src="girl.gif" alt="サンプル３" width="100" height="100"
style="filter:alpha(opacity=100,finishopacity=0,style=2);">

• このサンプルでは背景に壁紙をしいて、本当に透明かどうかわかりやすくしている。
• サンプル１　→　透明度 50% を指定。（NN6 〜でも透明になる指定もしている）
• サンプル２　→　線形。グラデーションが透明（0）から始まり、最終的には完全に不透明（100）になる。
• サンプル３　→　円形。グラデーションは不透明（100）から始まり、最終的には完全に透明（0）になる。

NN 6 〜 でも透明にする方法

• -moz-opacity: 〜 ;
• 値は　0（透明） 〜 1（不透明） で指定。他　細かい設定はできない。
• 例　：　80%の透明フィルタを指定
  <IMG src="　〜　" style="filter:alpha(opacity=80);-moz-opacity:0.8;">

filter:chroma(color=# 〜 );

• 特定した色の透過を指定できる。
• IE 5.5 〜 DirectX で使用できる Chromaフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• color=
  • 透明にする色を指定。
• enabled=
  • 0 （false　フィルタを実行しない）
  • 1 （true　フィルタを実行　デフォルト）

使用例

<IMG src="girl.gif" alt="" width="100" height="100"
style="filter:chroma(color=#000000);">

• 背景の黒色（#000000）を透過。壁紙がすけて見える。

filter:blur();

• ブレの効果を指定できる。画像などがにじんだようになる。
• IE 5.5 〜 DirectX で使用できる MotionBlurフィルタ　▼
  IE 5.5 〜 DirectX で使用できる Blurフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• add=
  • ブレた要素の上にもとの要素を上書き表示するかどうか指定。
  • 0 （false　上書きしない）
  • 1 （true　デフォルト　上書き）
• strength=
  • ブレの強さを指定。数値が大きいほどブレる。
• direction=
  • ブレる方向の角度を上から時計回りに45刻みで指定。
  • 0 （上）　/　45 （右上）　/　90 （右）　/　135 （右下）　/　180 （下）　/　225 （左下）　/　270 （左）　/　315 （左上）
• enabled=
  • 0 （false　フィルタを実行しない）
  • 1 （true　フィルタを実行　デフォルト）

使用例

<H1 style="filter:blur(direction=45);width:300px;height:30px;color:#0099FF;">
SAMPLE
</H1>

<P>
<IMG src="girl.gif" alt="" width="100" height="100"
style="filter:blur(direction=270,add=0);">
</P>

<P style="filter:blur(direction=120,strength=30);width:200px;height:160px;">
<IMG src="girl.gif" alt="" width="100" height="100">
</P>

• サンプル１
  <DIV> に、ブレの角度右上（45）を指定して、文字をはさんだ。
• サンプル２
  画像にブレを指定。ブレた部分ははみ出ない。
  ブレの角度を左（270）に指定。上書きなし（add=0）なのでかなりにじんでる。
• サンプル３
  <DIV> に指定してから画像をかこんだので、ブレてはみ出た部分も表示される。
  ブレの角度は右下（120）。またブレをかなり強く指定したが、上書きしているのではっきりしている。

filter:glow();

• 画像や文字に輝き（発光・炎につつまれたような）の効果を指定できる。
• IE 5.5 〜 DirectX で使用できる Glowフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• color=
  • 輝き（炎）の色を指定。デフォルトは赤。
• strength=
  • 輝き（炎）の強さを指定。数値が大きいほど輝く（炎が長い）。
• enabled=
  • 0 （false　フィルタを実行しない）
  • 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:glow(color=#CCCCFF,strength==10); width:200px;padding:20px;
font-size:40px;color:#FFFFFF;">
SAMPLE</P>

• 青っぽい（#CCCCFF）輝きを　20 の強さで指定。

filter:dropshadow();

• ドロップシャドウ（ぼかしのない影）を指定できる。
• IE 5.5 〜 DirectX で使用できる DropShadowフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• color=
  • 影の色を指定。
• offx=
  • 影を表示する位置をX座標で指定。
• offy=
  • 影を表示する位置をY座標で指定。
• positive=
  • 0 （false　影が透明になって背景が不透明になる）
  • 1 （true　デフォルト）
• enabled=
  • 0 （false　フィルタを実行しない）
  • 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:dropshadow(color=#CCFF66,offx=2,offy=-2);
width:100px;font-size:16px;color:#669900;">
SAMPLE</P>

<P style="filter:dropshadow(color=#CCFF66,offx=4,offy=4,positive=0);
width:200px;padding:20px;text-align:center;">
<IMG　〜　><BR>SAMPLE</P>

• 文字サンプル　→　黄緑（#CCFF66）の影を　右へ 2px 、下へ -2px （上へ2px）の位置に指定。
• 画像サンプル　→　黄緑（#CCFF66）の影、影と背景の透明/不透明の反転（positive=0）を指定。

filter:shadow();

• 連続してぼかされた影の効果を指定できる。
• IE 5.5 〜 DirectX で使用できる Shadowフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• color=
  • 影の色を指定。
• direction=
  • ブレる方向の角度を上から時計回りに45刻みで指定。
  • 0 （上）　/　45 （右上）　/　90 （右）　/　135 （右下）　/　180 （下）　/　225 （左下）　/　270 （左）　/　315 （左上）
• enabled=
  • 0 （false　フィルタを実行しない）　/　1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:shadow(color=#6666FF,direction=135);width:100px;height:30px;">
SAMPLE</P>

• 青っぽい（#6666FF）影を　右下（135）へ 指定。

filter:wave();

• 波打ちの効果を指定できる。
• IE 5.5 〜 DirectX で使用できる Waveフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• add=
  • 波打った要素の上にもとの要素を上書き表示するかどうか指定。
  • 0 （false　上書きしない）
  • 1 （true　デフォルト　上書き）
• freq=
  • 波の数を指定。
• lightstrength=
  • 波に当たる光の強さを 0 〜 100 の範囲で指定。
• phase=
  • 波の開始位置を 0 〜 360 の範囲で指定。
• strength=
  • 波の強さを指定。数値が大きいほど強い。
• enabled=
  • 0 （false　フィルタを実行しない）
  • 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:wave(freq=2,strength=3);
width:100px;padding:20px;font-size:50px;">
SAMPLE</P>

<P style="filter:wave(freq=10,lightstrength=50,strength=30);
width:300px;padding:20px;">
<IMG　〜　></P>

• 文字サンプルには、波の数 2 、波の強さ 3 を指定。
• 画像サンプルには、波の数 10 、光の強さ 50 、波の強さ 10 を指定。

filter:mask(color=# 〜 );

• 透明な部分を指定色で塗りつぶし、不透明な部分は全部透明になる。
• IE 5.5 〜 DirectX で使用できる MaskFilterフィルタ　▼

• () の中には以下の属性をカンマ（,）で区切って指定する。
• color=
  • 塗りつぶす色を指定。
• enabled=
  • 0 （false　フィルタを実行しない）
  • 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:mask(color=#6699FF);
width:500px;padding:10px;font-size:40px;">
■＊SAMPLE＊■</P>

filter:fliph();

• 指定された領域の中のものが左右逆になる。属性はなし。
• IE 5.5 〜 DirectX で使用できる回転・反転などの効果を持つフィルタ　▼

使用例

<P style="filter:fliph();font-size:30px;width:200px;">ABCDE</P>

filter:flipv();

• 指定された領域の中のものが上下逆さになる。属性はなし。

使用例

<P style="filter:flipv();font-size:30px;width:200px;">ABCDE</P>

filter:invert();

• 指定された領域の中の色（色相・明度・彩度）が反転される。属性はなし。
• IE 5.5 〜 DirectX で使用できる回転・反転などの効果を持つフィルタ　▼

使用例

<IMG src="girl.gif" alt="" width="100" height="100"style="filter:invert();">

filter:gray();

• 指定された領域の中のものが白黒（グレースケール）になる。属性はなし。
• IE 5.5 〜 DirectX で使用できる回転・反転などの効果を持つフィルタ　▼

使用例

<IMG src="girl.gif" alt="" width="100" height="100"style="filter:gray();">

filter:xray();

• X線を当てたような効果（グレースケールにして反転）を指定できる。属性はなし。
• IE 5.5 〜 DirectX で使用できる回転・反転などの効果を持つフィルタ　▼

使用例

<IMG src="girl.gif" alt="" width="100" height="100"style="filter:xray();">