filter: ***(***);

ブラウザ
  • IE
プロパティ
  • 独自拡張プロパティ
IE10以降は未対応となりました。

filter は、フィルタ効果を指定するプロパティです。

画像やテキストに対して、影を付けたりグラデーションをかけることができます。(他にも色々できます)

  • この指定内容はIE10以降では未対応となりました。

.example {
filter: shadow(color=red, direction=135);
}

基本書式

filter: フィルタ名(属性=値);

filter: の後に フィルタ名 を指定して、( ) 内に 属性=値 を記述します。

  • フィルタ名 … フィルタの種類を指定します。
  • (属性=値) … 色や長さ、方向など、フィルタ効果の細かい設定を行います。
  • 属性と値の設定内容は、フィルタの種類により異なります。

属性と値の指定方法

filter: shadow(color=red);

属性= に続いてその を記述します。上記の例では、色を設定する属性(color)に赤(red)を指定しています。

filter: shadow(color=red, direction=135);

複数の属性を設定する場合は、上記のようにカンマ( , )で区切って記述します。

複数のフィルタを設定する場合

filter: fliph() flipv();

複数のフィルタを同時に設定する場合は、半角スペースで区切って記述します。上記の例では、左右の反転上下の反転を同時に指定しています。

ボックスのサイズ指定(divとspanの場合)

<div style="width: 100%; filter: fliph();"> ~ </div>

div要素span要素に対してフィルタを設定する場合は、widthプロパティまたはheightプロパティでボックスのサイズを指定しておく必要があります。(または、positionプロパティabsolute を指定しておきます)

上記の指定を行わないと、フィルタは適用されません。

余白の確保

.example {
padding-bottom: 10px;
filter: shadow(color=gray, direction=135);
}

影、ブレ、発光、波状などのフィルタを指定する場合は、その効果が表示される領域を予め確保しておく必要があります。(例えば影を付ける場合は、影を落とす方向にその分の領域を確保しておきます)

マージンやパディングを指定するなどして、必要な分だけ余白を作っておきます。

  • このプロパティは、CSS 2では定義されていません。