CSSで画像編集ができてしまうfilter プロパティ

明度やコントラストの調整、グレースケールやセピア加工など、画像編集ソフトのような働きをする「filter」というcssプロパティがあります。

かなり便利なプロパティですが、残念ながらInternetExplorerには対応していません。(2020.2.22現在)

画像編集と見出しに書きましたが、filterプロパティは画像だけでなくテキストや背景色にも影響します。
親要素にfilterが指定されていると子要素まで影響を受けるので指定範囲には注意しましょう。

IEを無視することが可能であればとても便利なプロパティです。数が多いのでざっくりとご紹介します。

filterプロパティの基本

#hoge{
 filter : sepiaなど次にあげる関数値 (度合い) ;
}

で指定します。

この画像

を元に、実例載せていきます。IEブラウザの方はすみません。

グレースケール grayscale

その名の通りグレースケールです。%0〜1までの数字で度合いを指定。
0%または0だとグレースケールなし。
100%または1.0で完全グレースケール。
サンプルは0.9(90%)。

{
 filter: grayscale(0.9) ;
}

セピア sepia

セピア加工します。指定方法はgrayscaleと同じ。
サンプルは70%(0.7)

{
 filter: sepia(70%) ;
}

階調の反転 invert

ネガ・ポジの反転です。本来の色が補色に変わり明るいところは暗く、暗いところが明るくなります。
0 、0%がオリジナル。1.0または100%が完全に反転。50%を指定すると灰色一色です。
サンプルは100%。

{
 filter: invert(100%) ;
}

明度 brightness

明度を調整します。指定方法はまたもや同じ。
0 、0%だと真っ黒。1.0、100%が元の明度です。
サンプルは2.0 (200%)

{
 filter: brightness(200%) ;
}

彩度 saturate

彩度です。同じくです。
1.0 、100%がオリジナル。0、 0%だと白黒になります。
サンプルは1.2(120%)

{
 filter: saturate(120%) ;
}

コントラスト contrast

コントラストです。(以下同文)
サンプルは1.5(150%)。

{
 filter: contrast(1.5) ;
}

ぼかし blur

ぼかしをかけます。
ぼかし幅をpx・em・rem・cmなどで指定します。
サンプルは10px。

{
 filter: blur(10px) ;
}

色相 hue-rotate

色相を角度の指定で回転させます。
指定方法は0degから359deg。
サンプルは180deg。

{
 filter: hue-rotate(180deg) ;
}

影 drop-shadow

影をつけます。
box-shadow やtext-shadowプロパティとほとんど同じですが、指定できるのは
(X方向 Y方向 ぼかしの大きさ 色)だけです。マイナスの値も可能。
サンプルは複数指定しています。

{
 filter: drop-shadow(blue 10px 40px 30px) drop-shadow(#ff0 -10px -10px 30px) ;
}

透明度 opacity

opacityプロパティと一緒です。
サンプルなし。

filterプロパティは複数セットも可能

先ほどdrop-shadowを複数指定したように違う値を複数セットすることも可能です。
サンプルはセピアとぼかしと影を指定。

{
 filter:
   sepia(90%) 
   blur(2px) 
   drop-shadow(olive 30px 40px 3px);
}

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年2月22日HTML/CSScss,filter

Posted by ミフネWEB