画面にブラーをかけてみる

何を使うのかというと、下記。

で、これで画面左にメニューを置こうと考えたわけだ。
作りかけだが、やり方を思いついたのでメモする。

まず、タグ構成を下記のようにする。

<nav id="floating_nav" class="popup-nav">
  <div class="content">
    <ul class="nav nav-pills nav-stacked">
      <li>
        <h4>Contents</h4>
      </li>
      <li><a href="#wizard">Wizard</a></li>
    </ul>
  </div>
</nav>
<div class="blar">
  <!-- ここにコンテンツ全部 -->
</div>

メニュー部分と、コンテンツ部分を完全に分離するのがコツ。

.blar {
    -webkit-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}

.popup-nav {
    top:0;
    left:0;
    position: absolute;
    z-index: 1000;
    width:100%;
    height:100%;
    .content {
        position:fixed;
        padding-left: 1em;
        width: 40%;
        max-width: 400px;
        height: 100%;
        display: inline-block;
    }
}

結果

f:id:white-azalea:20150426175456p:plain