CSSプロパティ「backdrop-filter」で要素の後ろのみにエフェクトをかける
2022.01.20 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
今回紹介するのは要素の後ろのみにエフェクトをかけることができるCSSプロパティ「backdrop-filter」です。
以前紹介した記事、CSSの「mix-blend-mode」を使ってみるとは似ていますが、また違ったもので非常に便利です。
対応ブラウザですが、いつも通り以下をご参考ください。
気になるのはFirefoxとIE11くらいですね、覚えておきましょう。
ではDEMOを作成しましたのでまずはそちらご覧ください。
→DEMO
該当部分のソースは以下の様になっています。
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="box"> <div class="txt"> <p>none</p> </div> </div> <div class="box"> <div class="txt blur"> <p>blur</p> </div> </div> ・ ・ （略） |
■CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.box { width: 49%; margin: 0 0 20px; background: url(../img/001.jpg) no-repeat center center; background-size: cover; } .txt { display: flex; align-items: center; justify-content: center; padding: 20% 0; backdrop-filter: none; } .blur { backdrop-filter: blur(5px); } .brightness { backdrop-filter: contrast(40%); } .drop-shadow { backdrop-filter: drop-shadow(4px 4px 10px blue); } .grayscale { backdrop-filter: grayscale(50%); } .hue-rotate { backdrop-filter: hue-rotate(120deg); } .invert { backdrop-filter: invert(70%); } .opacity { backdrop-filter: opacity(20%); } .sepia { backdrop-filter: sepia(90%); } .saturate { backdrop-filter: saturate(80%); } .multiple { backdrop-filter: blur(4px) sepia(90%); } .multiple2 { backdrop-filter: contrast(80%) hue-rotate(50deg); } |
このようになっており、背景画像の上にも多くのエフェクトを付けることも可能です。
幅広い使い方ができそうなプロパティですね。
→DEMO
ここ最近はCSSで出来ることが多すぎて、全て頭に入れとくのも難しいと思うので「こんなこと出来たな～」程度にも覚えておきたいですね。
それかこれって出来るのかな？と思ったことは一度調べてみるクセとか付けるのもいいですね。
以上、クリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
