CSSだけでMacのDockみたいなのを作ってみた。

OS X Lionが登場しましたが、いかがお過ごしでしょうか。僕はまだ入手していませんが、人に見せてもらってちょっと欲しくなりました。

まあそれは置いておいて、MacのDockって便利ですよね。そのDock風のユーザー体験を、JavaScriptなしで作ってみました。

• Chrome, Safari … 一番綺麗に動きます。
• Firefox … 鏡面反射がない以外は十分に動きます。
• Opera … Firefoxと同程度なのですが、素早く動かしたときに何故か描画が崩れるようです。
• IE … お察しください。

追記 : Firefox対応版を作って下さった方がいます！　（20:34）

• -moz-element(with SVGmask)で Fxでもreflection (forked: CSSだけでMacのDockみたいなの – jsdo.it – Share JavaScript, HTML5 and CSS

デモ

jsdo.itをご覧ください:

もっとそれっぽく forked: CSSだけでMacのDockみたいなの – jsdo.it – share JavaScript, HTML5 and CSS

コードと解説

jsdo.itの方をご覧ください。

• もっとそれっぽく forked: CSSだけでMacのDockみたいなの – jsdo.it – share JavaScript, HTML5 and CSS

装飾的な部分を除いた、動き自体はこちらのサンプルをどうぞ:

• CSSだけでMacのDockみたいなの – jsdo.it – Share JavaScript, HTML5 and CSS

要点をまとめると、

• マウスを乗せたら大きくする
• 大きくするときはアニメーションする

これだけです。

ただし文字サイズが変わるとベースラインが変化してしまい、ガタガタしてしまうので、各項目はdisplay:table-cellとして独立させる事にしました。これは項目の内容としてちゃんと画像を用意しておけば防げたかもしれません。

よければ画像を用意して、上記コードをforkしてみてくださいな。