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

個別記事

前後の記事

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

この記事が属するカテゴリー: CSS

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;
}
  li:hover {
    font-size: 2em;
  }
    li:hover + li {
      font-size: 1.5em;
    }
      li:hover + li + li {
        font-size: 1.3em;
      }

当然のことながら、隣接セレクタは直後の要素へ対する指定しか出来ないんで、マウスオーバーしている要素の直前の要素は変化しない。それでも比較的それっぽく見える。調子に乗って、アイコンを使ってもっと Dock っぽいサンプルも作ってみた。

アイコンをズーム

CSS だけで Mac OS X の Dock 風ナビゲーションのサンプルその 2

アイコンにマウスオーバーでズーム

#dock li {
  float: left;
  list-style :none;
}
  #dock li img {
    width: 64px;
    height: 64px;
  }
    #dock li:hover img {
      width: 128px;
      height: 128px;
    }
      #dock li:hover + li img {
        width: 96px;
        height: 96px;
      }
        #dock li:hover + li + li img{
          width: 80px;
          height: 80px;
        }

img 要素を使ってるんだけど、画像サイズを width、height 属性での指定では無く、CSS でサイズ指定することで大きさを変化させている。あまり深く考えずに作ったんで、可変の原点が上側だけどなかなか良い感じ。

2006-03-08T00:05:53+09:00 | コメント (4) | トラックバック (3) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/369

このリストは、次のエントリーを参照しています: CSS だけで Mac OS X の Dock 風ナビゲーション:

俺なりのたわごとさんからのトラックバック: Lightbox JS v2.0でサムネール画像をDock風にカスタマイズ; 先日導入した Lightbox JS v2.0をもう少しカスタマイズしてみた。 lightbox.cssに以下を追加。 img.lightbox-img{... [続きを読む]; 2006年09月14日 00:12

AUSGANG SOFT さんからのトラックバック: Greasemonkeyでランチャー; 　前回のGreasemonkeyでテキストエディタは思った以上に、反響があってビ... [続きを読む]; 2006年11月27日 21:11

沖縄からヨッシャー（＝＾＾）９さんからのトラックバック: Mac OS XのDock風ランチャーRocketDock; macを使ったことある方であれば、そのカッコイイ　インターフェースに惚れ惚れしたことがあるのではないでしょうか。そんななかちょっとWINDOWSでＭＡＣ風... [続きを読む]; 2006年12月28日 13:11

bazuo さんからのコメント

それっぽいですねー

IE7bでもそれなりに動くことを確認しました！
ので、報告。

2006年03月08日 14:00

e-luck さんからのコメント: ご報告ありがとうございます。
実際は、ズームしている対象の後続のものしか大きさが変化してないのに、何となくそれっぽく見えるんですよねぇ :-); 2006年03月09日 00:32

蕗さんからのコメント: Opera8.5でもtext,img共に確認できましたよ～; 2006年05月06日 05:19

e-luck さんからのコメント

>Opera8.5でもtext,img共に確認できましたよ～

あれ、マジっすか。マウスオーバーしている要素のみ拡大されている感じじゃないですか？後続要素はまったく変化してないかと。
ちょっと今 Opera8.5 で確認できる環境じゃないんで、アレなんですが。

2006年05月07日 18:07

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog