filter

解説

画像やテキストに様々なフィルタ効果を与えます。Internet Explorerが独自に追加したプロパティ。DIV SPAN に適用する場合には、width プロパティや height プロパティを同時に指定しなければならない場合もあります。

プロパティ情報

値:-
初期値:-
適用対象:-
継承:-
パーセンテージ:-
適用メディア:視覚
レベル:MSIE4〜(5.5〜も追加されています)

参照

alpha() :透明・半透明・透明グラデーション

style透明グラデーションのスタイル(0=指定なし、1=線形、2=円形、3=方形)を指定する
startx, starty, finishx, finish透明グラデーションの領域を指定する
opacity開始透明度を0(透明)〜100(不透明)の範囲で指定する
finishopacit終了透明度を0(透明)〜100(不透明)の範囲で指定する
<div style="background-color: #ff00ff;">
<img src="../img/smp.gif" style="filter: alpha(style=2,opacity=5,finishopacity=95);">
</div>
<div style="width: 100%; filter: alpha(opacity=30);">半透明</div>

半透明

blur() :ブレさせる

addブレ効果を与えた要素の上に、元の要素を重ねるか(TRUE)、重ねないか(FALSE)を指定する
direction影の方向を角度で指定する
strengthブレの強さを指定する
<img src="../img/smp.gif" style="filter: blur(direction=45, strength=20);">
<div style="width: 100%; filter: blur(direction=45, strength=20);">ぶれ</div>

ぶれ

chroma() :特定の色を透明にする

color透明にする色を指定する
<img src="../img/smp.gif" style="filter: chroma(color=#000000);">

dropshadow() :テキストに影をつける(ぼかしのない影)

color影の色を指定する
offx影を表示するX座標の距離を指定する
offy影を表示するY座標の距離を指定する
positive0を指定すると影の領域内の影部分と影以外の部分の透明・不透明を反転させる
<div style="width: 100%; filter: dropshadow(color=#ff0000,offx=5,offy=5,positive=1);">ドロップシャドウ</div>
<div style="width: 100%; filter: dropshadow(color=#ff0000,offx=5,offy=5,positive=0);">ドロップシャドウ</div>

ドロップシャドウ

ドロップシャドウ

shadow() :テキストに影をつける(連続してぼかされた影)

color影の色を指定する
direction影の方向を角度で指定する
<div style="width: 100%; filter: shadow(color=#ff0000,direction=45);">シャドウ</div>

シャドウ

fliph() :領域を左右反転する

<img src="../img/smp.gif" style="filter: fliph();">
<div style="width: 100%; filter: fliph();">領域を左右反転</div>

領域を左右反転

flipv() :領域を上下反転する

<img src="../img/smp.gif" style="filter: flipv();">
<div style="width: 100%; filter: flipv();">領域を上下反転</div>

領域を上下反転

glow() :テキストに炎効果

color炎の色を指定する
strength炎の長さを指定する
<div style="width: 100%; filter: glow();">炎効果</div>

炎効果

gray() グレースケールで表示する

<img src="../img/smp.gif" style="filter: gray();">
<div style="width: 100%; filter: gray();">グレースケール</div>

グレースケール

invert() :色を反転する

<img src="../img/smp.gif" style="filter: invert();">
<div style="width: 100%; filter: invert();">色を反転</div>
色を反転

mask() :透明部分を指定色で塗りつぶし、不透明の部分を透明にする

color塗りつぶす色を指定する
<img src="../img/smp.gif" style="filter: mask(color=#ccccff);">
<div style="width: 100%; filter: mask(color=#ccccff);">マスク効果</div>

マスク効果

wave() :波状にする

add波効果を与えた要素の上に、元の要素を重ねるか(TRUE)重ねないか(FALSE)を指定する
freq波の数を指定する
lightstrength光の強さを指定する
phase波の開始位置を指定する
strength波の強さを指定する
<img src="../img/smp.gif" style="filter: wave(freq=3,lightstrength=50,strength=5);">
<div style="width: 100%; filter: wave(freq=1,strength=3,add=true);">波効果</div>

波効果

xray() :X線効果

<img src="../img/smp.gif" style="filter: xray();">
<div style="width: 100%; filter: xray();">X線効果</div>

X線効果