[新着] Webテンプレートを仮オープンしました
フィルタは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 style="width: 100%; filter: fliph();"> 〜 </div>
div要素やspan要素にフィルタを指定する場合は、width または height プロパティでボックスのサイズを指定しておく必要があります。(または position プロパティで absolute を指定しておきます)
上記の指定を行わないと、フィルタは適用されません。
#example {
padding-bottom: 10px;
filter: shadow(color=gray, direction=135);
}
影、ブレ、発光、波状などのフィルタを指定するときは、その効果が表示される領域を、あらかじめ確保しておく必要があります。
(例えば影を付ける場合、影を落とす方向にその分の領域がないと、影が途中で切れてしまいます。)
サイズを調節するか、パディングを指定するなどして余白を作っておきます。