ブラー(blur)エフェクト関連のデザイン・素材・Tipsまとめ

  • Posted on
  • Category : Tips
ブラー(blur)エフェクト関連のデザイン・素材・Tipsまとめ

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

ブラー(blur)エフェクト関連のデザインやTips、素材のまとめ 目次

  1. 参考になるWebデザイン
  2. 便利な素材
  3. プラグイン・チュートリアル・Tipsなど

1. 参考になるWebデザイン

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

Daniel Filler

Daniel Filler

Moovents

Moovents

Playground Inc.

Playground Inc.

Humaan

Humaan

Do

Do

Square

Square

Tiny Factory

Tiny Factory

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

目次へ

2. 便利な素材

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

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

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

目次へ

3. プラグイン・チュートリアル・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-shadowtransitionを用いてナビゲーションにブラーエフェクトを実装するチュートリアル。
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など。
使い方も簡単で、透過の度合いなどもオプションで変更できます。
配布サイトでも見ればわかるかと思いますが、かちびと.netさんでも紹介されているので、英語が苦手な方はそちらがわかりやすいです。

blur.js

blur.js

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

CSS text-shadowを使う

CSS text-shadowを使う

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

Fun With Blurred Text

Fun With Blurred Text

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

目次へ

Back to Top

ブラー(blur)エフェクト関連のデザイン・素材・Tipsまとめ

ブラー(blur)エフェクト関連のデザイン・素材・Tipsまとめ

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。