【CSS】filterプロパティを使ったサンプルコードまとめ

2019年6月12日CSS,CSSデザイン

filterプロパティ、画像もだけどCSS要素にも便利だったりで結構使うことありますよね

他のプロパティと合わせる事で一枚のアップデード画像・CSSだけで、かなり自由度のあるWEBデザインが可能となります

drop-shadowで影をつける

 
 
 
filter: drop-shadow(0px 5px 10px #000);

filter:drop-shadow(X,Y,大きさ,色);
影を付ける、デフォルトで透過処理に反映する
ブラウザが限られているけど以下のオプションもあり
filter:drop-shadow(X,Y,大きさ,ぼかし,大きさ,色,透過処理の有無);

saturate()で緩和処理をする

 
 
 
filter: saturate(0.5);

100%で処理なし、0%で最大値の処理がされる
0～100%までの範囲で指定できる（または0～1）

sepia()でセピア階調を変換する

 
 
 
filter: sepia(0.6);

sepia()は要素をセピア調に変換します、0~1の値で指定します

grayscale()で画像の明るさを変更する

 
 
 
filter: grayscale(5);

grayscale()は要素の明るさを指定します、0%～無制限までの範囲で指定できる（または0～）

hue-rotate()で色相の回転を反映させる

 
 
 
filter: hue-rotate(90deg);

hue-rotate()は要素の色相を反転を指定します、値に単位degを付ける
0～無限値で指定できる(360で一周？)

opacity()で画像・要素の透過処理を反映させる

 
 
 
filter: opacity(0.5);

opacity()は要素の透過を指定できます　1で未処理、0で完全に透過となる
0～1までの数値を指定できる（または0%～100%）

invert()で色を反転させる

 
 
 
filter: invert(0.7);

invert()は要素の色を反転させます、ネガ調な感じのやつですね
0%で処理なし、0～100%までの範囲で指定できる（または0～1）

brightness()で画像や要素の明るさを変更する

 
 
 
filter: brightness(2);

brightness()は要素の明るさを変更します　100%で変更なし、0%で完全な黒となります
値は0%～無限値で指定できます（途中から白?）

contrast()でコントラストを変更する

 
 
 
filter: contrast(0.5);

contrast()は要素のコントラストを変換します
100%で処理なし、0%で完全な灰色になる
0～100%までの範囲で指定できる（または0～1）

blur()で画像や要素にぼかし処理を行う

 
 
 
filter: blur(10px);

blur()は要素にぼかし効果を与えます、単位はpx

2019年6月12日CSS,CSSデザイン

Posted by Yousuke.U