先日開催された Web Directions East で John Allsopp 氏が Apple.com のナビゲーションバーを画像を使わずにライブコーディングしたとか。
残念ながら自分は Web Directions East に参加できなかったので実際には見ていないのですが、ニコニコ動画にそのさわりの動画がアップされています。
自分でやってみた
実際に John Allsopp 氏がどのようにコーディングしたのかは知らないのですが、自分の知ってる限りの知識でやってみようと思い、やってみましたｗ
ということで出来たのがこれです。
「Apple.com/jp のヘッダーナビゲーションを画像を使わずCSSのみでやってみる」のサンプルを見る
ただ今普通に見ても「違うんじゃね？」と思うでしょう。
これは CSS3 や CSS Gradients を使っているためで、完全な完成系は WebKit Nightly Builds のみで確認できます。
（ちなみに :last-child とかに対応していない一部のブラウザでは表示が崩れますｗｗ）
スクリーンショット
と言って終るのもアレなので、各ブラウザのスクリーンショットを貼っておきます。
尚、全て Mac 上です。クリックで実物大の画像がご覧になれます。
- Webkit
- Safari 3.1
- Firefox 3.1beta
- Firefox 3
- Firefox 2
- Opera 9.6
多分もっと作り込めると思うんですが、今日はこんなところで。
もっとこうするといいよ！などありましたらコメントなどいただけるとありがたいです！
