CSSとSVG filterでガラスっぽい効果をつける

SVG

今回作ったSVGファイルにはこんな感じのが書かれています。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
    <filter id="blur">
      <feGaussianBlur stdDeviation="2.5"/>
    </filter>
</svg>

やっていることはブラーをかけるフィルタを作っているだけですね。
SVGのフィルタについてはW3Cのページを参照してください。

Filter Effects — SVG 1.1 (Second Edition)

HTML

空divを使っていますが、やりようによってはどうにかできると思います。

<div id="content">
  <div id="content-bg"></div>
  <article>
    <header>
      <h1>初恋</h1>
    </header>
    <div class="body">
      <p>......</p>
    </div>
    <footer>
      <p><cite>島崎藤村 ｢若菜集｣ より</cite></p>
    </footer>
  </article>
</div>

そういえば、使ったテキストは島崎藤村の「初恋」という詩です。

CSS

html,
#content-bg {
  background     : url(bg.jpg) no-repeat right bottom fixed;
  background-size: cover;
}

#content {
  position     : absolute;
  left         : 5%;
  top          : 5%;
  border-top   : 1px solid rgba(255, 255, 255, 0.8);
  border-left  : 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  box-shadow   : 2px 2px 5px #000;
}

#content-bg {
  position: absolute;
  left    : 0;
  top     : 0;
  width   : 100%;
  height  : 100%;
  z-index : 0;
  filter  : url(filter.svg#blur);
}

article {
  position   : relative;
  z-index    : 1;
  padding    : 30px;
  background : rgba(255, 255, 255, 0.15);
  color      : #f0f0f0;
  font-family: serif;
  text-shadow: 1px 1px 1px #000;
}

例によってどうでもいい部分は省いてあります。

html要素と、空にした要素div#content-bgに同じような背景指定をしています。
以前「CSS3での背景指定方法のまとめ」でも書いた通り、background-size: coverは「画像が背景配置領域内を完全に覆う最小サイズになるようにアスペクト比を保ちながら拡大縮小する」指定です。

また、background-position: fixedは、画像の位置がビューポートに固定されますので、要素がどこにあろうと背景画像は同じ位置になりまうす。
これを利用して、同じ背景画像を2枚重ねているわけです。

そして、div#content-bgにSVGのフィルタをかけてぼかし、その上に重なるarticle要素に薄い白をRGBAで背景色に指定します。

これでガラスっぽい効果が完成です。