backdrop-filterでホームページの写真にPhotoshopのようなエフェクトを追加

backdrop-filter

こんにちは!雪乃です。

CSSのbackdrop-filterプロパティは、写真に様々なエフェクト(効果)をつけることができます。同じCSSのfilterプロパティと似ていますが、backdrop-filterは、内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクト(効果)のぼかしなどを適用することができます。

文章で説明してもわかりにくいのですが、今回はbackdrop-filterで何が出来るかご紹介します。

backdrop-filterの使い方

backdrop-filterプロパティを記述するだけで、エフェクト(効果)を追加できます。

div {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

ぼかし

各種ブラウザ対応状況

FireFox以外のほとんどの主要ブラウザでは使用できす。下記のリンク先をご確認ください。

対応ブラウザ

参考:https://caniuse.com/#feat=css-backdrop-filter

10種類のbackdrop-filterのエフェクト(効果)

backdrop-filterでは以下のようなエフェクト(効果)がかけられます。

blur ぼかし pxで指定
brightness 明るさ %で指定
contrast コントラスト %で指定
grayscale モノトーン %で指定
invert 階調反転 %で指定
hue-rotate 色相 degで指定
opacity 不透明度 %で指定
sepia セピア調 %で指定
saturate 彩度 %で指定
drop-shadow ドロップシャドウ pxで指定

ぼかし:blur

div {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

エフェクト(効果)適用画像

明るさ:brightness

div {
backdrop-filter:brightness(170%);
-webkit-backdrop-filter:brightness(170%);
}

エフェクト(効果)適用画像

コントラスト:contrast

div {
backdrop-filter: contrast(200%);
-webkit-backdrop-filter: contrast(200%);
}

エフェクト(効果)適用画像

モノトーン:grayscale

div {
backdrop-filter: grayscale(200%);
-webkit-backdrop-filter: grayscale(200%);
}

エフェクト(効果)適用画像

階調反転:invert

div {
backdrop-filter: invert(70%);
-webkit-backdrop-filter: invert(70%);
}

エフェクト(効果)適用画像

色相:hue-rotate

div {
backdrop-filter: hue-rotate(120deg);
-webkit-backdrop-filter: hue-rotate(120deg);
}

エフェクト(効果)適用画像

不透明度:opacity

div {
backdrop-filter: opacity(65%);
-webkit-backdrop-filter: opacity(65%);
}

エフェクト(効果)適用画像

セピア調:sepia

div {
backdrop-filter: sepia(65%);
-webkit-backdrop-filter: sepia(65%);
}

エフェクト(効果)適用画像

彩度:saturate

div {
backdrop-filter: saturate(50%);
-webkit-backdrop-filter: saturate(50%);
}

エフェクト(効果)適用画像

ドロップシャドウ:drop-shadow

div {
backdrop-filter: drop-shadow(4px 4px 10px black);
-webkit-backdrop-filter: drop-shadow(4px 4px 10px black);
}

まとめ

以上が、backdrop-filterを使ったエフェクト(効果)のかけ方となります。主要なブラウザはほとんどないのが対応していますので、Photoshopや画像編集ソフトがなくてもお手軽にエフェクト(効果)がかけられるので、とても便利ですね。ホームページを制作した際に、簡単なエフェクト(効果)を写真にかけたいなと思って今回のbackdrop-filterを思い出したら、是非使ってみてください。

使い方次第で、半透明のガラスのような表現もできますよ。

コメント

コメントをお寄せ下さい。

コメントの投稿

CAPTCHA


* コメントの更新情報

トラックバック

トラックバック URL : http://kitaguniweb.com/wordpress/blog/2020/07/01/backdrop-filter%e3%81%a7%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e5%86%99%e7%9c%9f%e3%81%abphotoshop%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af/html/trackback/