日本語ドメインとSEO！メリット・デメリットを紹介！
こんにちは！
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=c
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を思い出したら、是非使ってみてください。
使い方次第で、半透明のガラスのような表現もできますよ。
