CSSのfilterプロパティを使う

CSSのfilterプロパティを使う


CSSのfilterプロパティのblur,brightness,contrast,drop-shadow,grayscale,hue-rotate,invert,opacity,saturate,sepiaを使う

filter:blur(ぼかし半径px) ぼかし

元画像
blur(1px)
blur(2px)
blur(4px)

filter:brightness(明るさ%) 明るさ

元画像
brightness(50%)
brightness(100%)
brightness(150%)

filter:contrast(コントラスト%) コントラスト

元画像
contrast(50%)
contrast(100%)
contrast(150%)

filter:drop-shadow(影のオフセットx 影のオフセットy 影をぼかす半径 影の色) ドロップシャドー

元画像


drop-shadow
(8px 16px 0px
#777777)
drop-shadow
(8px 16px 4px
#777777)
drop-shadow
(8px 32px 4px
#444444)


filter:grayscale(グレースケール%) グレースケール

元画像
grayscale(0%)
grayscale(50%)
grayscale(100%)

filter:hue-rotate(色相変化角deg) 色相の変換

元画像
hue-rotate(90deg)
hue-rotate(180deg)
hue-rotate(270deg)

filter:invert(反転率%) 色の反転

元画像
invert(30%)
invert(50%)
invert(100%)

filter:opacity(不透明度%) 不透明度

元画像
opacity(0%)
opacity(50%)
opacity(100%)

filter:sepia(セピア%) セピア

元画像
sepia(0%)
sepia(50%)
sepia(100%)


Mam's WebSite