フィルタの設定方法

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

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

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

基本書式

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では定義されていません。