filter
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)
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)" />
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-8-7