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

Category : CSS, SVG

SVG のフィルタについては以前も少し書きましたが、今回は feGaussianBlur 要素を使って、ガラスのようなエフェクトを付けてみたいと思います。

デモページは以下ですが、たぶん Firefox でしかちゃんと見れないと思います。

Glass effect with CSS & SVG filter

デモファイルをダウンロード

背景には rachel a. k. さんの 52. she’s gone where the goblins go を使用しています。
この画像は CC BY-NC-SA 2.0 でライセンスされています。

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 のページを参照してください。

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 で背景色に指定します。

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


大して難しいことはやっていませんので、色々試してみるのも面白いと思いますよ。
今のところ使い道はありませんが……。

Leave a Reply