東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

CSSプロパティ「backdrop-filter」で要素の後ろのみにエフェクトをかける

2022.01.20 Posted by

tecmemo2201

こんにちは、ウェブラボクリエイターズメモです。

 

今回紹介するのは要素の後ろのみにエフェクトをかけることができるCSSプロパティ「backdrop-filter」です。

以前紹介した記事、CSSの「mix-blend-mode」を使ってみるとは似ていますが、また違ったもので非常に便利です。

 

対応ブラウザですが、いつも通り以下をご参考ください。

Can I use

 

気になるのはFirefoxとIE11くらいですね、覚えておきましょう。

 

ではDEMOを作成しましたのでまずはそちらご覧ください。

DEMO

 

該当部分のソースは以下の様になっています。

■HTML

 

■CSS

 

このようになっており、背景画像の上にも多くのエフェクトを付けることも可能です。

幅広い使い方ができそうなプロパティですね。

DEMO

 

ここ最近はCSSで出来ることが多すぎて、全て頭に入れとくのも難しいと思うので「こんなこと出来たな~」程度にも覚えておきたいですね。

それかこれって出来るのかな?と思ったことは一度調べてみるクセとか付けるのもいいですね。

以上、クリエイターズメモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278