Home > Archives > 2009-01

2009-01

クリックすると固定リンクをコピーしてくれるインターフェース

よくブログやサイトで見る「固定リンク」。コピーしてどこかに貼り付けるためにクリックすることも多いですよね(じゃない?)。

そこでgridplaneでは、クリックするだけでその固定リンクがコピーされるというインターフェースを実装したようです。

copied

↑ GIFアニメでわかりやすくつくってみた。

なかなか使いやすそうと思うのは僕だけですかね。「固定リンクをコピー」というリンクがあってもいいかも?!わかりずらいかなぁ。

» Data Visialization

さりげないレイアウト調整パネル

昨日と同じサイトから。右下にある「レイアウト調整パネル」がさりげなくていい感じです。最初は付箋のはしっこだけが見えていて、クリックするとメニューが現れます。

moji

↑ 最近GIFアニメばっかだなw。

文字の大きさとか一行の最大文字数が決められますよ。アクセシビリティ的に良いですね。このスクリプト、どこかで配布されているのかな・・・。

実際に動作している様子は以下からどうぞ。画面右下です。

» FirefoxまとめサイトのPukiwikiスキン “White flow” – Liner Note

コメント、ブックマーク、トラックバックを並列に見せる

このサイトのコメント類の見せ方、素敵ですね。ずらずらと並んでいるよりわかりやすいです。

comments

↑ GIFアニメでどうぞ。

これらは縦に並べるよりもこうして並列に横に並べたほうがいいかもですね。実際に動作している様子はこちらからどうぞ。

» FirefoxまとめサイトのPukiwikiスキン “White flow” – Liner Note

「パスワードを忘れたら?」をフォーム内に配置

ちょっと見たことがなかったインターフェースなのでメモ。

ログインフォームのテキストボックス中にアイコンを配置するのはよく見ますが、「パスワードを忘れたときに?」も「?」として中にいれちゃってますね。

マウスオーバーすると「Forgot?」が出てきます。

login

↑ GIFアニメにしてみた。

コンパクトなフォームを作りたいときにはいいかも・・かな。あまり邪魔じゃないですし。

実際に動作している様子は以下からどうぞ。

» PhotoPeach: Social Slideshow Sharing

スクロールすると変化しながらついてくる画像

CSSでこんなこともできるのですねぇ。すごい。

css_trick

↑ アニメーションでどうぞ(クリックすると実際のデモ画面へ)。

応用すると次のような効果も実現できますね。これもおもしろい。

css_trick2

↑ シュレッダーちっくに(クリックで動作する画面へ)。

アイデア次第でいろいろ使えそうですね。

実際のマークアップの仕方は以下に詳しいですよ。

» Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy)

codebaseのヘルプページのアイコンがかわいい

コード管理システムのcodebaseですが、ヘルプメニューについたアイコンがかわいいです。

codebase

↑ 浮き輪w。

助けを求めている感が直感的でいいですね。

» Codebase – Git repository hosting with source browser, changesets, ticketing & deployment tracking. – aTech Media

Home > Archives > 2009-01

最近の記事
カテゴリー一覧
過去記事一覧

Return to page top