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

filterプロパティ

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

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

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

構文(Syntax)

CSS

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

DOM(JavaScript)

値の取得
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