HOME　＞　スタイルシートリファレンス [ABC順 / 目的別]　＞　フィルタ（IE5.5～ DirectX）

IE5.5～ DirectX によるフィルタ効果

filter　：　画像やテキストにフィルタ効果を指定　[ IE 独自追加　IE5.5～ DirectX のみ ]

ショートカット

説明
フィルタ効果一覧

IE4～の filter でも代用できる　→　透明
透過
ブレ
にじみ
輝き
ぼかしのない影
影
波
マスク

IE5.5～ DirectX のみのフィルタ　→　浮き出し
へこみ
モザイク
回転・透明・反転など

説明

filter:progid:DXImageTransform.Microsoft. ～フィルタ効果～ ;

IE 5.5 ～ DirectX で使用できるフィルタ。　[IE5.5～ DirectX のみ]
filter: ～ ; より、多少表示速度が速い。
どちらにしろIEのみなので、こっちのほうがよいかも ...

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

ブロックレベル要素にフィルタを指定した場合、
要素の外に及んだ効果に応じて、自動的にボックスの範囲が広がる。
あとに続くページのレイアウトが崩れないように注意する必要がある。

効果一覧

指定なし	透明度 Alpha	特定色の透過 Chroma	ブレ MotionBlur	にじみ Blur
輝き Glow	ぼかしのない影 DropShadow	影 Shadow	波状 Wave()	マスク Mask
浮き出し Emboss	へこみ Engrave	モザイク Pixelate	回転・反転など BasicImage()

透明度を指定

filter:progid:DXImageTransform.Microsoft.Alpha();

透明・半透明・透明グラデーションを指定できる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

() の中には以下の属性をカンマ（,）で区切って指定する。
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="150" height="100"
style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);">

<IMG src="girl.gif" alt="透明度サンプル２" width="150" height="100"
style="filter:progid:DXImageTransform.Microsoft.Alpha(
opacity=100,finishopacity=30,style=1);">

このサンプルでは背景に壁紙をしいて、本当に透明かどうかわかりやすくしている。
サンプル１　→　透明度 70% を指定。
サンプル２　→　円形透明グラデーション。　（開始透明度を 100 に、終了透明度を 30 に指定）

特定色の透過を指定

filter:progid:DXImageTransform.Microsoft.Chroma(color=# ～ );

特定した色の透過を指定できる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

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

使用例

<IMG src="girl.gif" alt="透過サンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Chroma(color=#FFFFFF);">

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

ブレ効果を指定

filter:progid:DXImageTransform.Microsoft.MotionBlur();

ブレた効果を指定できる。画像などにスピード感が出る。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

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

使用例

<P style="filter:progid:DXImageTransform.Microsoft.MotionBlur(
direction=45,strength=30);
width:500px;height:30px;font-size:30px;color:#0099FF;">
MotionBlur Sample</P>

<P>
<IMG src="girl.gif" alt="ブレサンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.MotionBlur(
direction=120,strength=20);">
</P>

にじみ効果を指定

filter:progid:DXImageTransform.Microsoft.Blur();

にじんだ・ぼやけた・ぼかしたような効果を指定できる。

() の中には以下の属性をカンマ（,）で区切って指定する。
pixelradius=
- にじみの効果の量を 1 ～ 100 の範囲で指定。
makeshadow=
- にじみの影をつけるかどうか指定？
- 0 （false　影をつけない）
- 1 （true　デフォルト　影）
shadowopacity=
- にじみの効果の濃度を 0.00 ～ 1.00 の範囲で指定？
enabled=
- 0 （false　フィルタを実行しない）
- 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3);
width:500px;height:30px;font-size:30px;color:#0099FF;">Blur Sample
</P>

<P>
<IMG src="girl.gif" alt="にじみサンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3);">
</P>

輝きの効果を指定

filter:progid:DXImageTransform.Microsoft.Glow();

画像や文字に輝き（発光・炎につつまれたような）の効果を指定できる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

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

使用例

<P style="
filter:progid:DXImageTransform.Microsoft.Glow(color=#FFCC00,strength==10);
width:400px;font-size:20px;color:#FF9900;">Glow Sample</P>

<P>
<IMG src="girl.gif" alt="輝きサンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF0000,strength==7);">
</P>

ぼかしのない影を指定

filter:progid:DXImageTransform.Microsoft.DropShadow();

ドロップシャドウ（ぼかしのない影）を指定できる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

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

使用例

<P style="
filter:progid:DXImageTransform.Microsoft.DropShadow(
color=#CCFF66,offx=8,offy=-5,positive=0);
font-size:80px;color:#669900;font-family:Impact;text-align:center;">
S A M P L E</P>

<P>
<IMG src="girl.gif" alt="ドロップシャドウサンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.DropShadow(
color=#669900,offx=10,offy=10);">
</P>

背景画像を指定して、positive=0 の効果をわかりやすくしている。
文字サンプル　→　黄緑（#CCFF66）の影、影と背景の透明/不透明の反転（positive=0）を指定。
画像サンプル　→　緑（#669900）の影を　右へ 10px 、下へ 10px の位置に指定。

影を指定

filter:progid:DXImageTransform.Microsoft.Shadow();

連続してぼかされた影の効果を指定できる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

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

使用例

<P style="filter:progid:DXImageTransform.Microsoft.Shadow(
color=#6666FF,direction=135);
width:300px;height:30px;font-size:30px;font-family:Impact;">
S H A D O W</P>

<P>
<IMG src="girl.gif" alt="影サンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.DropShadow(
color=#669900,direction=225);">
</P>

波打ち効果を指定

filter:progid:DXImageTransform.Microsoft.Wave();

波打ちの効果を指定できる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

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

使用例

<P style="filter:progid:DXImageTransform.Microsoft.Wave(
freq=5,lightstrength=20,strength=3);
width:500px;font-size:50px;color:#33CCCC;">Wave Sample</P>

<P>
<IMG src="girl.gif" alt="波サンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Wave(
freq=20,lightstrength=0,strength=5);">
</P>

マスク効果を指定

filter:progid:DXImageTransform.Microsoft.MaskFilter(color=# ～ );

透明な部分を指定色で塗りつぶし、不透明な部分は全部透明になる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼

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

使用例

<P style="filter:progid:DXImageTransform.Microsoft.MaskFilter(color=#FFFFFF);
width:500px;padding:10px;text-align:center;font-weight:bold;">
■*■*■*■*■*■* SAMPLE *■*■*■*■*■*■</P>

浮き出し効果を指定

filter:progid:DXImageTransform.Microsoft.Emboss(bias= ～ );

エンボス（浮き出し）効果を指定できる。

() の中には以下の属性をカンマ（,）で区切って指定する。
bias=
- 浮き上がる高さを -1.0 ～ 1.0 の範囲で指定。
enabled=
- 0 （false　フィルタを実行しない）
- 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:progid:DXImageTransform.Microsoft.Emboss(bias=1);
width:500px;font-size:40px;background-color:#CCCCCC;">Emboss Sample</P>

<P>
<IMG src="girl.gif" alt="浮き出しサンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Emboss(bias=1);">
</P>

へこみ効果を指定

filter:progid:DXImageTransform.Microsoft.Engrave(bias= ～ );

へこみ効果を指定できる。

() の中には以下の属性をカンマ（,）で区切って指定する。
bias=
- へこむ深さを -1.0 ～ 1.0 の範囲で指定。
enabled=
- 0 （false　フィルタを実行しない）
- 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:progid:DXImageTransform.Microsoft.Engrave(bias=1);
width:500px;font-size:40px;background-color:#CCCCCC;">Engrave Sample</P>

<P>
<IMG src="girl.gif" alt="へこみサンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Engrave(bias=1);">
</P>

モザイク効果を指定

filter:progid:DXImageTransform.Microsoft.Pixelate(bias= ～ );

モザイク効果を指定できる。

() の中には以下の属性をカンマ（,）で区切って指定する。
maxsquare==
- モザイクのサイズを 2 ～ 50 の範囲で指定。
enabled=
- 0 （false　フィルタを実行しない）
- 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=5);
width:500px;font-size:50px;">Pixelate Sample</P>

<P>
<IMG src="girl.gif" alt="モザイク小サンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=5);">　　　

<IMG src="girl.gif" alt="モザイク大サンプル" width="100" height="100"
style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=10);">
</P>

回転・透明・反転などの効果を複数を指定

filter:progid:DXImageTransform.Microsoft.BasicImage();

回転・透明度・左右反転・色彩反転・X線効果・白黒・マスクの効果を指定できる。
組み合わせて複数の効果を同時に指定することもできる。
多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。　▼ ▼ ▼ ▼

() の中には以下の属性をカンマ（,）で区切って指定する。
rotation=
- 回転する角度を指定。
- 0　（なし）　1　（時計回りに90）　2　（時計回りに180）　3　（時計回りに270）
opacity=
- 不透明度を 0.00 ～ 1.00 の範囲で指定。
mirror=
- 0 （なし）
- 1 （左右反転をする）
invert=
- 0 （なし）
- 1 （色彩反転をする）
xray=
- 0 （なし）
- 1 （X線効果　白黒反転をする）
grayscale=
- 0 （なし）
- 1 （白黒にする）
mask=
- 0 （なし）
- 1 （透明・不透明の反転をする）
maskcolor=
- 反転させたあとの色を指定
enabled=
- 0 （false　フィルタを実行しない）
- 1 （true　フィルタを実行　デフォルト）

使用例

<P style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
width:160px;font-size:30px;color:#0099FF;">
<IMG src="girl.gif" alt="回転サンプル" width="150" height="100"><BR>Sample</P>

<P>
<IMG src="girl.gif" alt="透明度＆色彩反転サンプル" width="150" height="100"
style="filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.5,invert=1);">

<IMG src="girl.gif" alt="左右反転＆X線サンプル" width="150" height="100"
style="filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1,xray=1);">
</P>

SEO		[PR] 花お小遣い稼ぎビジネスローンお取り寄せ	掲示板レンタルサーバープロフ SEO