DesignWalkerのタネ

アメリカでも人気のアシックスのブランド オニツカタイガーの自販機がロンドンで話題を集めているそうです。。

これは、UKで始めてのスニーカーの自動販売機だそうです。。

Popularity: 25% [?]

これは！

PhoenixやRavenなど、話題のWebアプリケーションを開発中のAviary

今日、新しく開発中のWebアプリケーションのスクリーンショットと動画が公開されました。その名も

Dodo

Dodoは、画像をアップロードして季節や、年代、などを設定すると、画像がタイムスリップしてしまう！っというすごいツールです！！

これは、是非使ってみたいツールですね！動画は↓こちらからどうぞ〜！

っという、４月１日のエントリでした。。。
『Dodo: Web-based time machine!』

Popularity: 20% [?]

プログレスバーは、タスクの進行状況がわかって、とっても便利ですよね。

Pure CSS Animated Progress Bar

この、プログレスバーは、CSSとGIFアニメーションだけでとっても簡単に作れてしまいます。

用意する画像は、以下の３種類です。

1. 枠の画像

2. バーのGIFアニメーション

3. バーを隠す画像（分かりやすくするために、横幅を広げて表示してます。）

3のバーを隠す画像をCSSで調節すると、簡単なプログレスバーの出来上がりです〜。

詳細はこちらからどうぞ。htmlファイルもダウンロードできるので、是非お試しください。
『Pure CSS Animated Progress Bar』

Popularity: 34% [?]

こちらのサイトで、↓以下のように、ページの右隅がぺろっとめくれたような効果が出せるスクリプトを公開されていました。

『Create A Peel Away Effect On Website』

右端に、小さくめくれている部分が表示され、マウスがオーバーすると、ぺろっとめくれた感じをが出せます。

Wordpressをお使いの方は、『Pageear – free peel away ad』、こちらのプラグインを入れると、簡単にめくれた感じが出せるようですよ。

Popularity: 36% [?]

オープンソースのJavaScriptツール『iCarousel』を使うと、簡単に、画像のスクローラーなどが作れます。

iCarousel

例えば、↓こんなやつとか、

↓こんなやつとか

ぜひお試しください。
詳細はこちらからどうぞ〜。

『iCarousel』

Popularity: 15% [?]

MTで作られた綺麗なサイトを集めたショーケースサイト

Movable Love

MTを使われている方には、いろいろと参考になるのではないでしょうか？

とっても綺麗なブログがたくさん集められていますよ～。

詳細はこちらからどうぞ～。
『Movable Love』

Popularity: 15% [?]

先日、『Movable Type Design Assistant』なるものが公開されましたね。

MovableTypeを使っていて、デザインを変えたいけどHTMLやCSSの知識があまりない方にはお勧めです。

Movable Type Design Assistant

1. ページ上部に表示されているStyleからお好みのスタイルを選びます。スタイルをクリックすると、ページ下部にそのスタイルが適用されて、のサンプルが表示されます。

2. レイアウトを選びます。3カラム、2カラムお好みのレイアウトを選んでください。

3. CSSをカスタマイズできます。変更したい部分をクリックするとページ右上に設定されている、CSSが表示されるので、そのCSSを変更して、”Apply CSS”をクリックすると、設定できます。

MovableTypeにログインして、スタイルを変更すれば出来上がりです！

詳細はこちらからどうぞ～
『Movable Type Design Assistant』

Popularity: 14% [?]

ホットな女性有名人を集めたWikipediaみたいなサイト『Chickipedia – The Wiki of Hot Women』

このサイトの検索サジェストがちょっといい感じです。

Chickipedia – The Wiki of Hot Women

試しに『a』とタイプしてみると・・・

『A』から始まる女性有名人が画像付でサジェストされます。

ちょっとした違いですが、画像があるとわかりやすくていいですよね。

『Chickipedia – The Wiki of Hot Women』

Popularity: 13% [?]

CSSの::selectionという要素を使う、ちょっとしたCSSトリックです。

↑のようにテキストを選択してハイライトさせると、背景の画像が現れます。SafariとFirefoxでお試しください・・・

こちらから、サンプルCSSをどうぞ～。
『Image Appears When Text Is Highlighted』

Popularity: 6% [?]

アルファベットのAからZまで、それぞれの頭文字から始まる動物をモチーフにデザインされたとってもクリエイティブなタイプフェイスです。

その中からいくつかご紹介。

Alligator

Cobra

Emu

Jelly fish

Tiger

こちらから、26種類すべて見ることができます。（横スクロールで・・・）
『Twenty-Six Types of Animals by Jeremy Pettis』

Popularity: 13% [?]