[filterとの違いは?] CSSのbackdrop-filterとは? 使い方・対応ブラウザも分かりやすく解説!

この記事は上記のような疑問を解消するものとなっています。

CSSのbackdrop-filterを利用すると色々な効果をつけることができます。

backdrop-filterは外側の要素のみに効果を適用することができます。

例えば、曇りガラスなどの背景効果を出すことができます。

そこでこの記事ではbackdrop-filterについて解説していきます。

お洒落なデザインを作りたいという方は是非理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

1.backdrop-filterとは?

backdrop-filterプロパティは要素の背後の領域に適用するぼかしや色変化などのグラフィック効果を指定します。

今までは非常に長いCSSを指定する必要がありましたが、たった一行で簡単に実装できます!

iOSのような通知スタイルを作りたいという方はどのようなものか理解しておくことをオススメします。

しかし、対応していないブラウザもあるので使用する場合、サポートブラウザをしっかりとチェックしておきましょう。

値の指定方法は以下の通りです。

{ backdrop-filter: 値; }

値の指定方法

基本的に値の指定方法はfilterプロパティと同じです。

backdrop-filterとfilterの違い

backdrop-filterとfilterはどのような違いがあるのという思っている方も多いです。

filterは指定した要素にぼかしやセピアなどの効果を付け加えることができます。

backdrop-filterは要素の背後の領域に同じような効果を加えることができます。

この2つのプロパティは良く似ていますが、filterと違ってbackdrop-filterは、多くのブラウザが未対応です。

対応ブラウザ

主要ブラウザの「Google Chrome」、「Safari」、「Edge」では対応済みですが、「IE」と「Firefox」では未対応です。

「Firefox」はブラウザ設定を変えることでbackdrop-filterを有効にすることができます

2.backdrop-filterの使い方

それではbackdrop-filterの使い方をみていきましょう。

.box01 {
 background-color: rgba(31, 20, 11, 0.5);
 backdrop-filter: blur(10px);
}

上記のように、ぼかすための値であるblur()を使えば、かっこいい見た目のボックスを実装できます。

backdrop-filterは、写真に様々なエフェクトをつけることができます。

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

他にも値を設定できるのでいろいろと試してみることをお勧めします!

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?