CSSのぼかし(blur)のテクニック ～filterを使う方法とfiterを使わない方法～

Tweet

238

最近気に入っているのが、CSSを使ったブラー・ぼかしを与える効果

いろいろな演出に利用出来ます

単純にCSSにあるfilterを使ってblurを掛ける方法と

テキスト限定ですが、filterを使わずにblurを掛ける方法があります

filter を使って ぼかしを与える方法

まずは、すでにCSSに用意されている filter にある blur を使ってぼかしを与える方法です

(filter はまだ、完全にサポートされているものではなくて 一部のブラウザでのみ、現在は利用可能です)

CSS

.blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

単純にfilterを使っています

ぼかしの度合いはpxで指定します

この方法を使うと、要素全体をぼかします

テキストも画像もぼかすことが出来ます

filter を使わずにぼかしを与える方法

こちらは、filterを使わずに他の方法を代用して行います

出来るのはテキスト限定ですが、text-shadowが使えるブラウザならば、利用できて filte が使えない

ブラウザでも動作させれます

CSS

.blur2 {
  text-shadow: 0 0 10px #000;
  color: transparent;
}

text-shadow を使ってぼやけた影を作ります、そのままだと文字も表示されたままなので

文字の色を tranparent とすることで透明にします、そうすると影だけが残って ぼかしたようになります

テキスト限定の手法なのですが、filter を使わずに利用できる点

また若干ですが、ボケ具合が filter を使った場合と異なります

filter のぼかしの 1px と text-shadow のぼかしの 3px が同じぐらいになっていまので

text-shadow のほうが少し、微調整がし易いかもしれません

Tweet

短縮URL:

2014年08月06日 WEB制作系 コード・プラグイン blurCSSfiltertext-shadow