フィルタの指定方法

[新着] Webテンプレートを仮オープンしました


filter: ***(***);

ブラウザ
(独自拡張) Internet Explorer
参考
書式基本 要素名 クラス ID

フィルタはIEで対応している機能です。

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


フィルタの指定例

#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);
}

影、ブレ、発光、波状などのフィルタを指定するときは、その効果が表示される領域を、あらかじめ確保しておく必要があります。

(例えば影を付ける場合、影を落とす方向にその分の領域がないと、影が途中で切れてしまいます。)

サイズを調節するか、パディングを指定するなどして余白を作っておきます。



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版