[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
CSS3で画像を一切使わずに美しいナビを作ってみた！（IE対策もしてみた） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回はCSS3のみで１pxのラインまでデザインされたナビゲーションを作ってみました。 □demo □サンプル.zip 参考までに・・・こちらがPhotoshopで制作したナビゲーションです。（画像使用） 次にこちらが今回CSS３のみで作成したナビゲーションです。（画像不使用 Win7 Firefox12.0でキャプチャ） どうでしょう？さほど違いはないんじゃないでしょうか？ HTML <ul id="menu"> <li class="first active"><a href="#">デザイナー</a></li> <li><a href="#">プログラマー</a></li> <li><a href="#">社長ブログ</a></li> <li class="last"><a href="#">お空</a></li> </ul> HTMLソースはわずかこれだけ！ 本当はクラス名の「fir
タッチUXを実現する7つのポイント
思ったより指はじっとしていない。タッチUIの特徴と癖を分析して、タッチUXを実現する7つのポイントを紹介する。 普及してきたタッチデバイス 現在、スマートフォンやタブレット端末がすさまじい勢いで普及してきています。iPhone/iPadは新製品が出るたびに販売記録を塗り替え、Androidのスマートフォンやタブレットも各社からさまざまな端末が発売されています。今秋にはMicrosoftからWindows 8/RTも発売され、いよいよタブレットが本格的な普及期に入ります。 これらはすべてタッチUIで操作する、ということがこれまでのPCと大きく異なります。 直感的で分かりやすいタッチUIはあっという間に市場に受け入れられました。ユーザーは新しい体験を期待と興奮で歓迎しました。今やスライドしてページスクロールは当たり前で、スワイプでページをめくることに迷う人はいません。 同時に、そのような端末で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
