Light TALK Plus+ vol.32「backdrop-filter」

「Light TALK Plus+」とは…

アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「backdrop-filter」です!

backdrop-filter

backdrop-filterは要素の背景に、ガラスの様なぼかしを入れたり、背景画像の色を変化させることができるフィルターです。
変化する部分は画像全体だけでなく、一部だけでも変化させることができるのでデザインの幅が広がるCSSプロパティです。

backdrop-filterの初期値はnoneです。
フィルターは以下のような効果のフィルターがあります。

ぼかしblur();
明るさbrightness();
コントラストcontrast();
グレースケールgrayscale();
色相反転hue-rotate();
階調反転invert();
セピアsepia();
彩度saturate();

サンプル画像

今回は以下のサンプル画像を用いてbackdrop-filterの効果を見ていきます。

サンプル画像

ぼかし blur();

blur(1px)

blur(5px)

blur(10px)

明るさ brightness();

brightness(10%)

brightness(50%)

brightness(100%)

コントラスト contrast();

contrast(10%)

contrast(50%)

contrast(100%)

グレースケール grayscale();

grayscale(0)

grayscale(50%)

grayscale(1)

色相反転 hue-rotate();

hue-rotate(0)

hue-rotate(90deg)

hue-rotate(180deg)

階調反転 invert();

invert(0)

invert(50%)

invert(100%)

セピア sepia();

sepia(0)

sepia(0.5)

sepia(1)

彩度 saturate();

saturate(0)

saturate(1)

saturate(2)

backdrop-filterを使えば色々な表現をすることができるので幅広いサイトに応用できます。
サイトのイメージに合ったフィルターを使用することでよりデザイン性の高いサイトになるので使っていきたいCSSのひとつです。

Light Webからのお知らせ

ライトウェブはプライバシーマークを取得しました!
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します!

Related posts