Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション

Paul Armstrong Designs - Weblog - CSS マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。 対応ブラウザ Firefox 等の Gecko 系 Internet Explorer 7 beta 2 テキストをズーム CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 1 li { font-size: 1em

[kireifish]

2-3　transitionだけでできる、Mac OS XのDock風アニメーション

[ext3]

もう古いなこれは

[webmarksjp]

css

[karronoli]

ie7とoperaもいける。ie6はブラウザじゃないので無理。

[hxxk]

7-3. Mac OS X の Dock 風ナビゲーション

[lomo_lomo]

Dock っぽい動きを CSS だけで実現させるってアイデア

[sweetlove]

CSSだけってすごい。

[akz]

ま、お遊びかな。

[kdaiba]

macのfirefoxではちゃんと表示できません

[smotokezuru]

接セレクタを使ってフォントのサイズを段階的に変える

[tnk962]

選択されているものの隣が少しでも大きくなれば、もっとそれっぽくなるような気がする。CSSだけじゃ出来ないけど。

[uemu]

よいかも、

[ro-ca]

Opera9TP2でも動いた。てことは9では隣接セレクタに対応していたんですね。でも、アニメーションで動いた方がぽいかなぁ。

[silver_arrow]

ブラウザ選ぶのが難だけど、オモシロス。

[jdash]

コレはおもしろい。でも隣接セレクタって書き方がなんか変な書き方なんですねぇ。（生理的に受け付けづらい）

[twainy]

Gecko系、IE7で動く

[SEIKI]

CSS

[tny]

そのうち遊んでみる。Safari 1.3.2, MacOSX10.3でも見られたけどこれは錯覚？（FireFoxで動作確認済）

[keloinwell]

OSXのDock風ナビゲーション

[kelokelo]

OSXのDock風ナビゲーション

[kurobuchi]

CSSの小ネタ．実用性は低いが面白い．

[IGA-OS]

これ好きなヒト多いかもね

[lockcole]

Gecko専用。隣接テキスト（もしくは画像）も合わせてサイズ変更することでDock風に。ここまで無理してCSSでやることもなさそうだけど，でもそれなりに動いてる。面白い。

[tototti]

がぞうなれば完璧。