backdrop-filterでホームページの写真にPhotoshopのようなエフェクトを追加
こんにちは!
CSSのbackdrop-filterプロパティは、写真に様々なエフェクト(効果)をつけることができます。同じCSSのfilterプロパティと似ていますが、backdrop-filterは、内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクト(効果)のぼかしなどを適用することができます。
文章で説明してもわかりにくいのですが、今回はbackdrop-filterで何が出来るかご紹介します。
backdrop-filterの使い方
backdrop-filterプロパティを記述するだけで、エフェクト(効果)を追加できます。
div {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
10種類のbackdrop-filterのエフェクト(効果)
blur | ぼかし | pxで指定 |
---|---|---|
brightness | 明るさ | %で指定 |
contrast | コントラスト | %で指定 |
grayscale | モノトーン | %で指定 |
invert | 階調反転 | %で指定 |
hue-rotate | 色相 | degで指定 |
opacity | 不透明度 | %で指定 |
sepia | セピア調 | %で指定 |
saturate | 彩度 | %で指定 |
drop-shadow | ドロップシャドウ | pxで指定 |
モノトーン:grayscale
div {
backdrop-filter: grayscale(200%);
-webkit-backdrop-filter: grayscale(200%);
}
色相:hue-rotate
div {
backdrop-filter: hue-rotate(120deg);
-webkit-backdrop-filter: hue-rotate(120deg);
}
ドロップシャドウ: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を思い出したら、是非使ってみてください。
使い方次第で、半透明のガラスのような表現もできますよ。