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

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

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

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

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

→Can I use

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

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

→DEMO

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

■HTML

<div class="box">
	<div class="txt">
		<p>none</p>
	</div>
</div>
<div class="box">
	<div class="txt blur">
		<p>blur</p>
	</div>
</div>
　　・
　　・
　（略）

■CSS

.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で出来ることが多すぎて、全て頭に入れとくのも難しいと思うので「こんなこと出来たな～」程度にも覚えておきたいですね。

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

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

The post CSSプロパティ「backdrop-filter」で要素の後ろのみにエフェクトをかける first appeared on ウェブラボ（株）スタッフブログ.