またまた大掃除ネタで、デザイントレンドのひとつとして注目されているブラーエフェクトに関してのまとめです。
主に海外のサイトで背景画像なんかでよく使用されているのを見かけても、国内ではあまり見ないという印象なんですが、個人的には好みなエフェクトでいろいろとメモしていたので整理兼ねてまとめました。

参考になるwebデザイン

ブラー背景を上手く取り入れた参考になるwebデザインです。

Daniel Filler

Daniel Filler

Moovents

Moovents

Playground Inc.

Playground Inc.

Humaan

Humaan

Do

Do

Square

Square

Tiny Factory

Tiny Factory

 

ほとんど同じサイトが紹介されている感じですが、以下参考になるデザインを集めたエントリーです。

便利な素材

デザイン作成時に便利なブラー背景の素材で、全部合わせるとかなりの量がありました...。
一部有料なのもありますがほとんどがフリー素材ですし、これだけあれば使いやすいのが見つかりそうです。

利用の際はご自身で再度ライセンス等の確認をお願いします。

Dribbble Backgrounds

Dribbble Backgrounds

10 Free Blurred Backgrounds

10 Free Blurred Backgrounds

Free Blurred Backgrounds

Free Blurred Backgrounds

Blurrry – Free 20 Blurred Backgrounds

Blurrry – Free 20 Blurred Backgrounds

Dribbble Background By Badhon Ebrahim

Dribbble Background By Badhon Ebrahim

10 Free Backgrounds

10 Free Backgrounds

Light Kit Ps

Light Kit Ps

8 Backgrounds – Free download

8 Backgrounds – Free download

10 free blurred backgrounds

10 free blurred backgrounds

10 Backgrounds “Biscarrosse”

10 Backgrounds “Biscarrosse”

Free Ultimate Blurred Background Pack

Free Ultimate Blurred Background Pack

12 Blurred Backgrounds

12 Blurred Backgrounds

23 free blurred backgrounds

23 free blurred backgrounds

8 Blurred Landscape Images

8 Blurred Landscape Images

9 free blurred backgrounds

9 free blurred backgrounds

100 Free Blurry Textures

100 Free Blurry Textures

Free Download: Blurred Backgrounds

Free Download: Blurred Backgrounds

25 Free Blurred Backgrounds

25 Free Blurred Backgrounds

プラグイン・チュートリアル・Tipsなど

ブラー素材作成のチュートリアル、jQueryやCSSを用いて要素や動きにブラーエフェクトをかけるTipsなどです。
探せば他にもいろいろあったり、中にはIEでは使えないとかありますが、個人的に覚えておきたいものに絞って紹介します。

Tips and Ideas for Designing With Blurred Images

Tips and Ideas for Designing With Blurred Images

ブラー背景を使用する際のTipsを幾つか紹介しており、チルトシフトや他のエフェクトと合わせて使用した場合などもあります。
操作しているキャプチャなど分かりやすいものはないですが、Photoshopでどのように操作するかなども簡単にですが紹介されています。

Blur Menu with CSS3 Transitions

Blur Menu with CSS3 Transitions

CSS3のtext-shadowやtransitionを用いてナビゲーションにブラーエフェクトを実装するチュートリアルで、7種類のデモがあります。

Fullscreen Image Blur Effect with HTML5

Fullscreen Image Blur Effect with HTML5

フルスクリーンのイメージギャラリーにブラーエフェクトを加えたもの。
写真を大きく見せたときや見せ方に拘りたいときに良さそうです。

Item Blur Effect with CSS3 and jQuery

Item Blur Effect with CSS3 and jQuery

CSS3とjQueryを使用してホバーした要素を浮き上がらせて目立たせ、それ以外の要素をぼかすというもの。
使い方によっては様々な場面で使えそうです。

Foggy

Foggy

要素全体にブラーエフェクトを与えるjQueryプラグインで、サポートブラウザはIE8以上、Firefox、Safari、Chromeなど。
使い方も簡単で、透過の度合いなどもオプションで変更できます。

blur.js

blur.js

Foggyと同じように、要素にブラーエフェクトを与えることができるjQueryプラグイン。 DEMOも沢山用意されています。

配布終了したようです。

グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える

グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える

JavaScriptは使わずにCSSのtext-shadowを使用してブラーエフェクトをかける方法で、3種類のサンプルが用意されています。

Fun With Blurred Text

Fun With Blurred Text

CSSとjQueryを用いてブラーエフェクトをかける方法で、マウスホバーで与えるものや対応ブラウザのみに与えるものなどあります。