filter

Home>CSS>プロパティリファレンス>filter

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

filterプロパティの役割

filterプロパティは、適用した要素に視覚的な効果を与えます。

filterプロパティは、InternetExplorerの独自仕様のため、他のブラウザでは効果ありません。そのため、あまり使わない方がいいでしょう。

filterプロパティに設定できる値

InternetExplorer5.5以上で、filterプロパティを指定するときには、以下のように書く場合があります。詳しくは各サンプルソースをご覧ください。

filter:progid:DXImageTransform.Microsoft.値

静的な視覚効果

Alpha() 透過表示。
AlphaImageLoader() 背景と内容の間に画像を表示。
BasicImage() 透明度、回転、反転、グレースケールの指定。
Blur() ぼかし。
Chroma() 指定した色を透明にする。
Compositor() 既に表示している画像とこれから表示する画像を合成する。
DropShadow() ぼかしのない影。
Emboss() 浮彫(エンボス)。
Engrave() 彫り込み(エングレーブ)。
fliph() 左右反転。
flipv() 上下反転。
Glow() 後ろから光が差しているような効果。
Gradient() 背景と内容の間にグラデーション表示。
ICMFilter() Windowsカラーマネジメントシステムで色調管理。
invert() 色相、明度、彩度を反転。
Light() 光を当てたような効果。
MaskFilter() 指定した色でマスク。
Matrix() 面を傾ける。
MotionBlur() 指定した方向にぶれる。
Pixelate() モザイク表示。
Shadow() ぼかしのある影。
Wave() 波状に歪める。
xray() グレースケールにして反転。

Alpha()

指定した要素を透過表示にします。透過表示とは、背景が透けて見えるようにするということです。

FinishOpacity 終了透明度。0~100の間で指定。
FinishX 透過終了のX座標。
FinishY 透過終了のY座標。
Opacity 開始透明度。0(透明)~100(不透明)の間で指定。
StartX 透過開始のX座標。
StartY 透過開始のY座標。
Style 透過形状。0(不透過)、1(線形)、2(円形)、3(長方形)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Alpha(Style=2, Opacity=50, FinishOpacity=0 );')" />

AlphaImageLoader()

表示する画像の表示範囲や縮小・拡大をします。

Enabled フィルタの使用許可。trueまたはfalse。
sizingMethod 画像の表示方法を指定。crop(左上から指定範囲まで表示しはみ出した部分は非表示)、image(画像をすべて表示)、scale(指定範囲に拡大・縮小して全体を表示)
src 画像のパスを指定。

<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../../../data/img/global/logo.jpg', sizingMethod=scale);width:100px;height:50px;">

BasicImage()

画像の色や向きを変えたり、マスクをかけたりします。

GrayScale グレースケール。1(true)か0(false)で指定。
Invert 色の反転。1(true)か0(false)で指定。
Mask マスク効果。1(true)か0(false)で指定。
MaskColor マスクの色を1~16777216で指定。Maskが1のときのみ有効。
Mirror ミラー表示。1(true)か0(false)で指定。
Opacity 透明度。0(透明)~1(不透明)の範囲で指定。
Rotation 回転。1(90度)、2(180度)、3(270度)で指定。
Xray グレースケールで反転。1(true)か0(false)で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.BasicImage(Opacity=0.5, Rotation=2, Invert=1)" />

Blur()

画像をぼかします。

MakeShadow 影を表示。1(true)か0(false)で指定。
PixelRadius ぼかす距離。1~100の間で指定。
ShadowOpacity 影の透明度。0(透明)~1(不透明)の間で指定。MakeShadowが1のときのみ有効。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=1, ShadowOpacity=0.5)" />

Chroma()

指定した色を透明にします。

Color 透明にする色を指定(16進数や色名)。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Chroma(Color=#003466)" />

画像の色を透明にする場合は、正確に透明にしたい色が何かをスポイトツールなどで調べた方がいいでしょう。

→色のスポイトツール「ColorPicker」(Vector)色のスポイトツール(ColorPicker)ダウンロードページを別ウィンドウで開く

Compositor()

Compositor()には、Functionという値を設定します。Functionがとる値は以下の表の数値です。

0 適用した要素とマスクの両方を非表示。
1 適用した要素とマスクの明度を比較し暗い方を表示。
2 適用した要素とマスクの明度を比較し明るい方を表示。
3 適用した要素のみ表示。
4 マスクの上に適用した要素を表示。
5 マスクと重なった適用した要素の部分のみを表示。
6 マスクと重なっていない適用した要素の部分のみを表示。
7 マスクと重なっている、適用した要素とマスクを表示。
8 マスクを反転し適用した要素に合成する。反転した色が濃いほど透明化する。
9 マスクを反転し適用した要素に合成する。色が濃いほど透明化する。
10 適用した要素からマスクが占める領域をひく。
19 適用した要素のみ表示。
20 適用した要素とマスクを両方表示。
21 マスクのみ表示。
22 マスクから適用した要素の占める領域を引く。
23 適用した要素とマスクの内、適用した要素の占める領域のみを表示。
24 適用した要素をマスクで引いた画像の内、マスクが占める領域のみを表示。
25 適用した要素にマスクを足した画像の内、マスクが占める領域のみを表示。

DropShadow()

指定した要素に影を付けます。

Color 影の色。16進数又は色名で指定。
OffX 要素から影までの横の距離。
OffY 要素から影までの縦の距離。
Positive 反転。1(true)か0(false)で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#aa0000, OffX=5, OffY=5)" />

Emboss()

指定した要素にエンボス加工を施します。

Bias 彫の深さ。-1~1の間で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss(Bias=0.5)" />

Engrave()

指定した要素にエングレイブ加工を施します。

Bias 彫の深さ。-1~1の間で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Engrave(Bias=0.5)" />

fliph()

指定した要素を左右反転にします。

<img src="../../../data/img/global/logo.jpg" style="filter:fliph()" />

flipv()

指定した要素を上下反転にします。

<img src="../../../data/img/global/logo.jpg" style="filter:flipv()" />

Glow()

指定した要素の後ろから光が差しているような効果を与えます。

Color 光の色。16進数又は色名で指定。
Strength 光の強さ。1~255の間で指定。255が強い。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(Color=#ff0000, Strength=5)"/>

Gradient()

指定した要素にグラデーション効果を施します。

EndColorStr グラデーション終了の透明度と色。
GradientType 0(縦にグラデーション)、1(横にグラデーション)
StartColorStr グラデーション開始の透明度と色。

<p style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ff003466, EndColorStr=#ffcccccc)">

ICMFilter()

 

ColorSpace カラープロファイル名。
Enabled 効果の有無。0(無効)か1(有効)。
Intent 効果の種類をキーワードで指定。
Graphic(彩度を維持する)、Match(サポートしていない色がある場合もっとも近い色を割り当てる。白は維持される)、Picture(指定されたICMを維持)、Proof(サポートしていない色がある場合もっとも近い色を割り当てる。白は維持されない)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.ICMFilter(ColorSpace=sRGB, Intent=Graphic, Enable=1)" />

invert()

指定した要素の色相・明度・彩度を反転します。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.invert()" />

Light()

光を当てるようなエフェクトをかけます。このフィルタを使用する場合には、スクリプトが必要になります。

サンプルはJavaScriptによって、読み込み時に効果を与えています。

<img src="../../../data/img/global/logo.jpg" style="filter:Light();" onLoad="this.filters.Light.addAmbient(255,0,100,100)" />

MaskFilter()

指定した要素にマスクをかけます。

Color マスクの色。16進数又は色名で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.MaskFilter(Color=#ff0000)" />

Matrix()

適用した要素が平面的に傾きます。

M11 横の長さ。1が変化なし。
M12 横の変形。指定した数値の倍率だけ下辺が右に伸びる。
M21 縦の長さ。1が変化なし。
M22 縦の変形。指定した数値の倍率だけ右辺が下に伸びる。
SizingMethod 変形した部分について、はみ出した場合の処理を指定。
clip to original(はみ出した部分は非表示)か、auto expand(すべて表示)を選べる。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Matrix (M11=1,M22=1,M12=0.1,M21=0.1,sizingMethod='auto expand')" />

MotionBlur()

適用した要素をぶれさせます。

Add ぶれさせた要素の上に元の要素を重ねる。1(true)か0(false)で指定。
Direction ぶれの方向。0~360で角度を指定。又は、キーワードで指定する。
Top(0)、Top Right(45)、Right(90)、Bottom Right(135)、Bottom(180)、Bottom Left(225)、Left(270)、Top Left(315)、Top(360)
Strength ぶれの強さ。整数で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.MotionBlur(Direction=135, Strength=20)" />

Pixelate()

適用した要素にモザイクをかけます。

MaxSquare モザイクの大きさ。2~50の間で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=10)" />

Shadow()

適用した要素に影を付けます。

Color 影の色。16進数又は色名で指定。
Direction 影の伸びる方向。0~360で指定。又はキーワードで指定。
Top(0)、Top Right(45)、Right(90)、Bottom Right(135)、Bottom(180)、Bottom Left(225)、Left(270)、Top Left(315)、Top(360)
Strength 影の強さ。整数で影の伸びる距離を指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#aa0000, Direction=270, Strength=10)" />

Wave()

適用した要素が波打ちます。

Add 適用した要素を重ねる。1(true)か0(false)で指定。
Freq 波の数。整数で指定。
LightStrength 光の強さ。0~100の間で指定。100が強い。
Phase 波の開始位置。0~100の間で指定。
Strength 波の強さ。整数で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Wave(Freq=3, LightStrength=60, Phase=20, Strength=20)" />

xray()

X線を照射したような画像にします。つまり、グレースケールになります。

<img src="../../../data/img/global/logo.jpg" style="filter:xray()" />

動的な視覚効果

動的な視覚効果を及ぼす場合には、JavaScriptなどのスクリプトを必要とします。ある画像からある画像に切り替わるときに、エフェクトをかける、という動作をします。

以下のサンプルには、画像をクリックするともう一つの画像に切り替わるスクリプトを設定しています。

Barn() 扉を開閉するように切り替わる。
Blinds() ブラインドが開閉するように切り替わる。
CheckerBoard() チェック模様に切り替わる。
Fade() フェードイン・フェードアウトしながら切り替わる。
GradientWipe() 水平方向にグラデーションがかかるように切り替わる。
Inset() 左上から右下に切り替わる。
Iris() 指定した形状をなぞって切り替わる。
RadiaWipe() 指定した形状で切り替わる。
RandomBars() 複数の線状に切り替わる。
RandomDissolve() ドット柄に切り替わる。
Slide() スライドしながら切り替わる。
Spiral() 渦を描くように切り替わる。
Stretch() 画像が縮んだ状態から伸びるように切り替わる。
Strips() 角から対角線へ切り替わる。
Wheel() 車輪のスポークが回転するように切り替わる。
Zigzag() 上から下にジグザグに切り替わる。

Barn()

扉が開くように画像が切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
motion 効果の広がり方。
in(外から内へ)、out(内から外へ)
orientation 効果の方向。
horizontal(水平方向に)、vertical(垂直方向に)

<script type="text/javascript">
num="";
function FilterDemo(DATA){
if(num==""){num="2";}
else{num=""}
DATA.filters[0].Apply();
DATA.src="../../../data/img/global/logo"+num+".jpg";
DATA.filters[0].Play();
}
</script>
<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.barn(orientation=horizontal, motion=out)" onclick="FilterDemo(this)" />

Blinds()

ブラインドを開閉するような効果を与えます。

bands ブラインドの数。整数で指定。
Direction 開閉する方向。
left(右から左へ)、right(左から右へ)
duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.blinds(Direction=left, bands=5, duration=2)" onclick="FilterDemo(this)" />

CheckerBoard()

チェック模様に切り替わります。

Direction 効果の方向。
left(右から左へ)、right(左から右へ)
duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
squaresX 横の数。整数で指定。
squaresY 縦の数。整数で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.CheckerBoard(Direction=left, squaresX=10, squaresY=5, duration=2)" onclick="FilterDemo(this)" />

Fade()

フェードアウト、フェードインしながら切り替わります。

center 効果のセンタリング。
true、false
duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
overlap フェードアウトとフェードインを同時に行うか行わないか。
0(別個)~1(同時)の間で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Fade(center=true, Overlap=0.5, duration=2)" onclick="FilterDemo(this)" />

GradientWipe()

水平方向にグラデーションがかかるように切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
gradientSize 効果の広がり方。
0~1の間で指定。
motion 効果の方向。
foward(左から右へ)、reverse(右から左へ)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.GradientWipe(gradientSize=0.25, motion=forward, duration=3)" onclick="FilterDemo(this)" />

Inset()

左上から右下に広がるように切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.inset(duration=3)" onclick="FilterDemo(this)" />

Iris()

irisStyleで指定した形状に切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
irisStyle circle(円形)、cross(×字)、diamond(ひし形)、plus(+字)、square(四角)、star(星形)
motion 効果の方向。
foward(左から右へ)、reverse(右から左へ)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Iris(duration=3, irisStyle=plus, motion=out)" onclick="FilterDemo(this)" />

RadialWipe()

wipeStyleに指定した形状で切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
wipeStyle clock(時計の針の動き)、radial(右上から左下へ)、wedge(中央上から左右に開いて中央下へ)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=wedge, duration=3)" onclick="FilterDemo(this)" />

RandomBars()

ランダムに線状に切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
orientation 効果の広がり方。
horizontal(水平方向)、vertical(垂直方向)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.RandomBars(duration=3, orientation=horizontal )" onclick="FilterDemo(this)" />

RandomDissolve()

細かい点状に切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve( duration=3)" onclick="FilterDemo(this)" />

Slide()

スライドするように切り替わります。

bands 1~100の間で指定。
duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
slideStyle 効果の方向。
hide(裏に隠れている)、push(右から左へ押し出す)、swap(後ろから表に出てくる)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Slide(band=1, slideStyle=hide, duration=3)" onclick="FilterDemo(this)" />

Spiral()

渦を描いて切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
gridSizeX 何列で切り替えるか、列の数。
1~100の間で指定。
gridSizeY 何行で切り替えるか、行の数。。
1~100の間で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Spiral(duration=3, gridSizeX=10, gridSizeY=10)" onclick="FilterDemo(this)" />

Stretch()

画像が縮んだ状態から伸びるように切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
stretchStyle hide(左から伸びるように)、push(左から押しつぶすように)、spin(中央から両脇に伸びるように)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Stretch(gradientSize=0.25, motion=forward, duration=3)" onclick="FilterDemo(this)" />

Strips()

角から対角線に切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
motion leftdown(右上から左下に)、leftup(右下から左上に)、rightdown(左上から右下に)、rightup(左下から右上に)

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Strips(motion=rightdown, duration=3)" onclick="FilterDemo(this)" />

Wheel()

車輪のスポークが回転するように切り替わります。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
spokes 切り替わるスポークの数。2~20で指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.Wheel(spokes=20, duration=3)" onclick="FilterDemo(this)" />

Zigzag()

左上から右下までジグザグに切り替えます。

duration 効果のスピード。整数で指定。
enabled 効果の有無。
true(有効)、false(無効)
gridSizeX 何列で切り替えるか、列数を指定。
gridSizeY 何行で切り替えるか、行数を指定。

<img src="../../../data/img/global/logo.jpg" style="filter:progid:DXImageTransform.Microsoft.GradientWipe(gradientSize=0.25, motion=forward, duration=3)" onclick="FilterDemo(this)" />

関連リンク

よく読まれている記事

UpDate:2010-8-7