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

blur
このエントリーをはてなブックマークに追加
PR

最近気に入っているのが、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 のほうが少し、微調整がし易いかもしれません

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)