備忘録的プログラミングリファレンス

filter プロパティ

 filter プロパティは、エレメントに対して視覚効果(ぼかし、彩度、影付きなど)を指定するプロパティです。

filter プロパティの値はスペースで区切って複数設定することができます。

明るさを150%、コントラストを110%、gray色の影を表示
filter: brightness(150%) contrast(110%) drop-shadow(10px 10px 5px gray);

テキストを背景色の反対色で表示

 filter プロパティを使ってテキストの色を背景色の反対色に指定することもできます。
 反対色の調整は、invert()、 grayscale()、 contrast() 関数を利用します。

テキストを背景色の反対色に
p{
	filter: invert(100%) grayscale(100%) contrast(100%);
}

 invert()は反転色の調整。grayscale()はグレイスケールの調整。 contrast()はコントラストの調整です。

 ぼかしの効果がある blur() メソッドを利用する場合は、不透明度を指定した背景色を設定する必要があります。混じる色を合わせて設定する必要があります。

参考:CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する

ページ内 Index

構文(Syntax)

CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ;

DOM(JavaScript)

値の取得
String = object.style.filter
値の設定
object.style.filter = " none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ";

値(Values)

Value摘要
none初期値(default値)。
blur(px)ぼかし半径。値が大きいほどにぼやかしが大きくなる。
brightness(%)明るさ調整。100%がdefault。
contrast(%)コントラスト調整。100%がdefault。
drop-shadow(h-shadow v-shadow blur spread color)エレメントに影を加えることができる。box-shadowプロパティと同じ値設定。
grayscale(%)グレイスケールに加工。0%がdefault。100%で完全な白黒表現。
hue-rotate(deg)色相を調整(反対色)。0degでdeafult。360degで反対色。
invert(%)ネガポジ反転。0%がdefault。100%で完全な反転色。
opacity(%)透過度を調整。100%がdefault。0%で見えなくなる。opacityプロパティと同じ値設定。
saturate(%)色の濃さをあらわす彩度。100%がdefault。0%で見えなくなる。
sepia(%)セピア加工。0%がdefault。100%で完全なセピア色。
url(URL)SVGフィルターが設定されたXMLファイルを取得。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)none
継承(Inherited)no
変化(Animatable)yes

Example