読者です 読者をやめる 読者になる 読者になる

謎言語使いの徒然

適当に気になった技術や言語を流すブログ。

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

html5 勉強 メモ

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

Filter Effects Module Level 1

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

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

<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

で、css filter 仕様を使って、メインコンテンツを丸ごとブラーをかけてしまい、メニューをかぶせるように表示する。
すげー面倒なのは、この blar 仕様、適用したタグ配下全てをブラーしてしまうのだ。メニューを配下に置かないのはこの為。

後は JavaScript で blar クラスの on/off と、メニューの表示非表示を切り替えればよい。

難点を挙げると、デザインの為にタグの構成をいじらなければならないというところだ。
JavaScript でデザインの為のコードをゴリゴリするのも何か違うような気がするし悩みどころではある。

画面デザインを弄るって時間とパワーとられるねぇ