Flexbox — The Animated TutorialIn my previous tutorial I dumped all of the flex diagrams in one place to show you flex box bird’s eye view — but it’s not enough.
第17回 立体的なナビゲーションバーのアニメーション | gihyo.jp
今回のお題は、ボタンが立体的に並んだナビゲーションバーだ（サンプル1）。マウスポインタを重ねると、ボタンが飛び出す。「Navigation Bar by Jan Kaděra」のデザインとアニメーションをもとに、わかりやすく組み立て直した。3次元の動きで、ボタンの数も多い。少しやっかいそうに感じたかもしれない。ところが、思いのほかコードはたやすい。 サンプル1 CSS3: 3D style navigation bar 平面的なナビゲーションバー まずは<head>要素にいくつか仕込みをしておこう。ボタンのアイコンにはFont Awesomeを使うので、つぎのようにCDNを読み込む（第15回の「アイコンWebフォントを使う」参照）。おなじみの-prefix-freeも加える。そして、今回はリセットCSSを用いた。ブラウザによって異なるデフォルトをリセットすることで、表現が揃えられ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
