HTML CSS

cssのみでiOSのような後ろをぼかしたエフェクトを実現

2015年8月3日

iOSがフラットデザインになったとき、後ろの背景がぼかされるエフェクトが登場しました。
今回はそれをcssのみで表現してみます。

ぼかした画像とぼけていない画像を用意する方法

まずはこの方法のデモから。

準備として、2枚の画像を用意してください。

  • 元の画像 (a)
  • (a)をぼかした画像

下記のようにcssファイルとhtmlファイルを用意します。

stylesheet.css
body{
  width:100%; 
  height:100%;
  
  background-image:url(images/bg.jpg);	//(a)
  background-size:cover;		//(a)
  background-position:center;		//(a)
  background-attachment:fixed;		//(a)
  
}
.box{
  position:relative;
  width:90%;
  height:300px;
}
.bg-blur{
  position:absolute;
  width:100%;
  height:100%;
  
  background-image:url(images/bg-blur.jpg)	//(a)
  background-size:cover;			//(a)
  background-position:center;			//(a)
  background-attachment:fixed;			//(a)
  
}

example1.html
<body>
  <div class="box">
    <div class="bg-blur"></div>
  </div>
</body>

(a)cssで画像の設定をする

まず、bodyタグ(背景)に画像を適用し、その画像を固定配置、中央配置、画面いっぱいに広げるように設定します。
次に、ぼかしたい要素(ここでは”.box”)に背景をぼかした画像を適用し、同様に、固定配置、中央配置、画面いっぱいに広げるように設定します。

これで、背景は固定したままで、ぼかした画像を適用した要素がスクロールで動いてもぼかした画像は背景画像の位置にマッチしたものができます。

このように設定することで、「背景は固定、ぼかした画像を適用した要素はスクロールする」、という状況でも
ぼかした画像の位置は背景画像と同じ場所に位置して、背景画像をぼかしたように要素が動いてくれるようになります。

まとめ

iOSのように背景がぼけたような要素の作り方を説明しました。

background-attachment:fixed;を適用した場合、少し動作が重くなるので注意してください。

cssで画像にフィルターを直接かけて同様のデザインを実装することもできます。
ただ、そちらの方が重い印象だし、きれいにぼけてくれないように思います。
直接フィルターをかける方法は、これはこれで重宝しそうな気もするので次回まとめます。

お問い合わせやコメント

ウェブサイト制作の依頼やこの投稿へのコメントなど、なんでもいいのでお問い合わせ待っています!ウェブデザインのチューターもしているのでそういったことへの依頼も受け付けています。

送信完了しました。 お問い合わせ確認用メールを上記のメールアドレス宛てに送信しましたのでご確認ください。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信完了しました。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信に失敗しました。お手数ですが入力内容をご確認の上、再度送信ボタンをクリックしてください。