またまた大掃除ネタで、デザイントレンドのひとつとして注目されているブラーエフェクトに関してのまとめです。
主に海外のサイトで背景画像なんかでよく使用されているのを見かけても、国内ではあまり見ないという印象なんですが、個人的には好みなエフェクトでいろいろとメモしていたので整理兼ねてまとめました。
参考になるwebデザイン
ブラー背景を上手く取り入れた参考になるwebデザインです。
Daniel Filler
Moovents
Playground Inc.
Humaan
Do
Square
Tiny Factory
ほとんど同じサイトが紹介されている感じですが、以下参考になるデザインを集めたエントリーです。
- Showcase of Websites Using Blurred Images As a Background | Designbeep
- Design Trend: Blurred Backgrounds in Web Design | Vandelay Design Blog
- Web Design Trend Showcase: Blurred Backgrounds | Line25 Web Design Blog
- 25 Creative Examples of Blurred Background in Web Design | Designrshub
- 10 Examples of Blurred Backgrounds in Web Design | Website Backgrounds | Best PSD Freebies
便利な素材
デザイン作成時に便利なブラー背景の素材で、全部合わせるとかなりの量がありました...。
一部有料なのもありますがほとんどがフリー素材ですし、これだけあれば使いやすいのが見つかりそうです。
利用の際はご自身で再度ライセンス等の確認をお願いします。
Dribbble Backgrounds
10 Free Blurred Backgrounds
Free Blurred Backgrounds
Blurrry – Free 20 Blurred Backgrounds
Dribbble Background By Badhon Ebrahim
10 Free Backgrounds
Light Kit Ps
8 Backgrounds – Free download
10 free blurred backgrounds
10 Backgrounds “Biscarrosse”
Free Ultimate Blurred Background Pack
12 Blurred Backgrounds
23 free blurred backgrounds
8 Blurred Landscape Images
9 free blurred backgrounds
100 Free Blurry Textures
Free Download: Blurred Backgrounds
25 Free Blurred Backgrounds
プラグイン・チュートリアル・Tipsなど
ブラー素材作成のチュートリアル、jQueryやCSSを用いて要素や動きにブラーエフェクトをかけるTipsなどです。
探せば他にもいろいろあったり、中にはIEでは使えないとかありますが、個人的に覚えておきたいものに絞って紹介します。
Tips and Ideas for Designing With Blurred Images
ブラー背景を使用する際のTipsを幾つか紹介しており、チルトシフトや他のエフェクトと合わせて使用した場合などもあります。
操作しているキャプチャなど分かりやすいものはないですが、Photoshopでどのように操作するかなども簡単にですが紹介されています。
Blur Menu with CSS3 Transitions
CSS3のtext-shadowやtransitionを用いてナビゲーションにブラーエフェクトを実装するチュートリアルで、7種類のデモがあります。
Fullscreen Image Blur Effect with HTML5
フルスクリーンのイメージギャラリーにブラーエフェクトを加えたもの。
写真を大きく見せたときや見せ方に拘りたいときに良さそうです。
Item Blur Effect with CSS3 and jQuery
CSS3とjQueryを使用してホバーした要素を浮き上がらせて目立たせ、それ以外の要素をぼかすというもの。
使い方によっては様々な場面で使えそうです。
Foggy
要素全体にブラーエフェクトを与えるjQueryプラグインで、サポートブラウザはIE8以上、Firefox、Safari、Chromeなど。
使い方も簡単で、透過の度合いなどもオプションで変更できます。
blur.js
Foggyと同じように、要素にブラーエフェクトを与えることができるjQueryプラグイン。 DEMOも沢山用意されています。
配布終了したようです。
blur.js (DEMO)Blur.js Take II | jakiestfu
グローバルメニューとかでマウスホバーしているリンク以外にCSSだけでブラー効果を与える
JavaScriptは使わずにCSSのtext-shadowを使用してブラーエフェクトをかける方法で、3種類のサンプルが用意されています。
Fun With Blurred Text
CSSとjQueryを用いてブラーエフェクトをかける方法で、マウスホバーで与えるものや対応ブラウザのみに与えるものなどあります。