サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。 CSSと簡単なjQueryで実装しています。 まずはサンプルをご覧ください。 See the Pen Menu with Underline Sliding Animation by digistate (@digistate) on CodePen. HTMLの構造 HTMLは至ってシンプル。 メニュー用のリスト(ul)をナビゲーション(nav)タグで括っています。 メニュー用のリスト要素の次に、スライドしてついてくる下線用の要素(#slide-line)があります。jQueryでマウスオーバーに合わせてこの下線の位置を変更してやります。 <nav id="navigation"> <ul> <li class="curr
Facebook Timeline Design using JQuery and CSS. facebookのタイムラインをjQueryとCSSで作るチュートリアル。 facebookのタイムラインをみて感動した者です。あのUIを見て自分も作ってみたいけどどうやってるんだろうって言う方もおられると思いますが、そんなタイムラインを実際に作っちゃおうというチュートリアルです. ここまでの応用力があればなんでも考えたUIは作れそうなので、勉強しておくとよいかも 実際のデモページ - 良い感じです 優れたUIが利便性を高めてユーザを集めるというところをfacebookが実証していますが、こうした先進的なUIを作れるようになりたいものですね 関連エントリ jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル HTML5＆CSS3をフルに活用したスライドショー実装ライ
Google Plus Photo stack animation using Jquery and CSS3 Google＋のフォトスタックを実現するjQuery＆CSS3のサンプル カーソルを合わせるとアニメーションをしながら展開されるフォトスタックを実現するチュートリアルとデモがダウンロード可能です。 写真の一覧をオシャレに出したいような場合に使えます。 デモページはこちら こうしたテクニックが当たり前になってくると更に応用して新しいインタフェースが出てきたりして楽しみです 関連エントリ カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key -- and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. According t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
