フィルタの設定方法

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

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

【基本書式】

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