[CSS] filter機能で画像に様々な色調補正を行う
概要
画像などの要素に様々な効果を与えることの出来るfilter機能のデモ。
本体
画像素材を借用。
- blur
-
( px )
ぼかし[px指定]
- opacity
-
( )
透明度[数値指定 or %指定] 0=0%=透明 1=100%=標準
- contrast
-
( )
コントラスト[(]数値指定 or %指定] 0=0% 1=100%
- brightness
-
( )
明度[数値指定 or %指定] 0=0% 1=100%=標準
- saturate
-
( )
彩度[数値指定 or %指定] 0=0% 1=100%=標準
- hue-rotate
-
色相[deg指定] 0～360
- invert
-
( )
反転[数値指定 or %指定] 0=0%=標準 1=100%=最大
- grayscale
-
( )
グレースケール[数値指定 or %指定] 0=0%=標準 1=100%=最大
- sepia
-
( )
セピア[数値指定 or %指定] 0=0%=標準 1=100%=最大
- drop-shadow
-
( px
px
px
)
影(Xオフセット Yオフセット ぼかし 色)
参考URL
filter - CSS: カスケーディングスタイルシート | MDN使用素材
acworksさんによる写真ACからの写真かわいいフリー素材集 いらすとや 様