マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。
- 対応ブラウザ
- Firefox 等の Gecko 系
- Internet Explorer 7 beta 2
テキストをズーム
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 っぽいサンプルも作ってみた。
アイコンをズーム
#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 でサイズ指定することで大きさを変化させている。あまり深く考えずに作ったんで、可変の原点が上側だけどなかなか良い感じ。
Comments
それっぽいですねー
IE7bでもそれなりに動くことを確認しました!
ので、報告。
ご報告ありがとうございます。
実際は、ズームしている対象の後続のものしか大きさが変化してないのに、何となくそれっぽく見えるんですよねぇ :-)
Opera8.5でもtext,img共に確認できましたよ~
>Opera8.5でもtext,img共に確認できましたよ~
あれ、マジっすか。マウスオーバーしている要素のみ拡大されている感じじゃないですか? 後続要素はまったく変化してないかと。
ちょっと今 Opera8.5 で確認できる環境じゃないんで、アレなんですが。
ただあたったコマを大きくするだけじゃどうかなぁ
この程度はだれでも思いつくし苦労もいらない
左右3つのコマを追従させて変化させないとだめだよね