はじめに
皆さんはbackdrop-filterというCSSは使ってますか。
すりガラスのようなエフェクトを与えるプロパティです。
下記サイトで変化を確認できるので興味がある方は遊んでみて下さい。
backdrop-filterのサポート状況
当ブログでは、まだ使用してないのですが、下記ブログではbackdrop-filterを使ってバックグランドをぼかすエフェクトを入れてみました。
backdrop-filterは「Safari」「Chrome」「Edge」ではフルサポートとなってますが、なぜか「Firefox」はまだサポート対象外のままです。
Firefoxでこのブログを表示すると、ヘッダーのメイン画像の背景に同じ画像が重なっているので、変な感じのヒーローヘッダーに見えます。
近い将来Firefoxでもサポートされると思いますが、今すぐFirefoxでbackdrop-filterを使いたい場合は、下記方法で可能なので、お試し下さい。
Firefoxでbackdrop-filterを使う方法
実はFirefoxでbackdrop-filterは使えるのですが、デフォルトでは無効となっています。
これを設定エディター：about:configで有効に変更します。
それでは変更の手順を説明します。
変更方法
Firefoxを立ち上げたら、アドレスバーにabout:configを入力してください。
アラートが表示されますが「危険を承知で使用する」をクリックします。
次にbackdrop-filterを検索します。
デフォルトではfalseとなっているので右の⇔をクリックします。
trueに変わったら設定変更は終了です。
それではbackdrop-filterが有効になっているか、確認してみましょう。
一度ブラウザを閉じ、再度Firefoxを立ち上げブログにアクセスします。
今度は背景がぼけて、いい感じに変わりました。
気軽に足跡残してね！
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
https://t.co/ulDkY3MYaR
— heavy-peat (@AfterWork_Lab) March 23, 2021
Firefoxでbackdrop-filterを有効にする方法を書いて見ました。
困っている方は、お試し下さい。#CSS #Firefox #backdropfilter
それでは今回の記事はこれでおしまい。
0 件のコメント:
コメントを投稿