IE独自filter

TOPページに戻る > CSS

IE5.5以降から表示できるfilter

IEの独自機能でフィルターを要素に指定できます
フィルターは様々な効果を出すことができますがIEのみ表示できます
実際に使うときは、他のブラウザはCSS3で表現し、IE8以下はCSS3には未対応ですがフィルターをCSS3の代わりに使うことで、グラデーション効果などを実現できます

使い方（書式）

セレクタ {
 filter: progid:DXImageTransform.Microsoft.フィルタ名(値);  /* 基本の形 */
  }                                    

AlphaImageLoaderフィルタ

IEでPNGの画像を使うことができます

セレクタ {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ファイル名.png');
  }                                    

BasicImageフィルタ

セレクタ {
 filter: progid:DXImageTransform.Microsoft.BasicImage(属性の種類=値,属性の種類=値);
  }                                    

対応ブラウザ
属性の種類	属性の種類=値	説明
grayscale	grayscale=1	グレースケールで表示
Invert	Invert=1	色反転
Mask	Mask=1	色を透明にする
MaskColor	MaskColor=12345678	Mask=1のときにマスクをかけたところに色を付ける 色の16進数を10進数に変換して指定する 16進数変換で検索すれば出てきます
Mirror	Mirror=1	文字や画像を反転
Opacity	Opacity=0.1	0が透明、1が不透明。0.5が半分透明
Rotation	Rotation=1	1が90度回転、2が180度回転、3が270度回転
Xray	Xray=1	色を反転、グレースケール

Gradientフィルタ

IE8以下にはGradientフィルタを使ってグラデーションを実現できます

セレクタ {
 filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=1,StartColorStr=#000000,EndColorStr=#ffffff);
  }                                    

属性の種類	属性の種類=値	説明
gradienttype	gradienttype=0	0が上から下にグラデーション、1は左から右にグラデーション
StartColorStr	StartColorStr=#000000	グラデーションの始めの色、色の指定は6桁の16進、透明度の指定もできる8桁の16進も可能
EndColorStr	EndColorStr=#ffffff	グラデーションの終わりの色、色の指定は6桁の16進、透明度の指定もできる8桁の16進も可能