iOS のような後ろの要素を css だけでぼかす方法

iOSでは下のスクリーンショットのように、後ろの要素がボケるようになっていて、まるでステンドグラスのようなデザインが素敵です。
これをcssだけで実装することができます。

-webkit-backdrop-filter

対応状況や注意点

対応ブラウザは Can I Use… から確認できます。

2019年6月現在、この機能は一般的ではありません。唯一、safari と edge が 対応しています。
safariやedgeにしても、プレフィックス-webkit-をつける必要があります

google chromeは次期バージョンから標準で対応してくるようで、対応状況は拡大中です。

実装方法

後ろの要素をぼかすので、必ず意図した通りに動作させるために、z-indexでz方向の順番を明記しておきましょう

HTML
<div class="container">
  <div class="front">この要素の後ろがボケます。</div>
  <img class="back" src="example.jpg" />
</div>


CSS
.container{ 
 position: relative; 
 with: 100%;
 height: 300px;
}

.front{
 z-index: 2;
 backdrop-filter: blur(30px);
 -webkit-backdrop-filter: blur(30px);

 position: sticky; position: -webkit-sticky;
 top: 50%; 
 left: 0;
 width: 100%;
 padding: 15px 0;
 text-align: center;
 font-size: 1.5rem;
 color: black;
 background-color: rgba(255,255,255,0.5);
}

.back{ 
 z-index: 1; 
 
 position: absolute;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}

実装結果

この要素の後ろがボケます。

iOSのステンドグラスのような背景がボケるデザインをHTMLとCSSだけで実装できるので、デザインの幅が広がります。
ただし、この機能はまだ拡大中で、全てのブラウザが対応しているわけではないので注意が必要です。 (2019年6月現在)

css だけで画像をぼかすなどのフィルターを実装する方法

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。