Mmemo

PC作業に関するメモ

[CSS] filter機能で画像に様々な色調補正を行う

概要

画像などの要素に様々な効果を与えることの出来るfilter機能のデモ。

本体

画像素材を借用。

サンプル画像01 サンプル画像02 サンプル画像03
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
(0deg)

色相[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からの写真
かわいいフリー素材集 いらすとや