filter
filterプロパティは、グラフィック効果を要素に適用します。
このプロパティは、画像・背景・境界の描画を調整するためによく使用されます。
Live sample
filter:
blur
(0
)
brightness
(100
)
contrast
(100
)
drop-shadow(
4
4
4
#948B70);
grayscale
(0
)
hue-rotate
(0deg)
invert
(0
)
opacity
(100
)
saturate
(100
)
sepia
(0
)
width: 200px;
height: 200px;
background: #DDCEA1;
filter: blur(0px)
brightness(100%)
contrast(100%)
drop-shadow(4px 4px 4px #948B70)
grayscale(0%)
hue-rotate(0deg)
invert(0%)
opacity(100%)
saturate(100%)
sepia(0%);
width: 200px;
height: 200px;
background: #DDCEA1;・単位を「%」で指定できる関数は、数値でも指定できます。(例：brightness(34%) contrast(0.34))
・blur() 要素をぼかします。 ・brightness() 要素を明るくしたり暗くしたりします。 ・contrast() 要素のコントラストを上げたり下げたりします。 ・drop-shadow() 要素の背後にドロップシャドウを適用します。 ・grayscale() 要素をグレイスケールに変換します。 ・hue-rotate() 要素の色相を全体的に変更します。 ・invert() 要素の色を反転させます。 ・opacity() 要素を半透明にします。 ・saturate() 要素の彩度を上げたり下げたりします。 ・sepia() 要素をセピア調に変換します。