[JS]アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext
CSSの3Dアニメーションを使った、iPhone, iPadアプリで見かけるパネル切替のエフェクトをウェブページに実装するスクリプトを紹介します、 Kontext -GitHub Kontextのデモ Kontextの使い方 Kontextのデモ デモでは3枚のパネルをダイナミックなアニメーションで切り替えます。 操作は、下部のナビゲーションとキーボードの矢印キーに対応しています。 Kontext -デモページ Kontextの使い方 スクリプトは単体で動作するので、jQueryなどは必要はありません。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを<body>の上に外部ファイルとして記述します。 <head> <link rel="stylesheet" href="css/kontext.css"> <link rel="stylesheet" href="
グローバルナビゲーションの「溝」を簡単にカッコよく作るTips. - 秋葉秀樹 個人ブログ
最近、Webデザインのトレンドとか言って、立体的なナビゲーションじゃなくて、平面でシンプルなナビゲーションがトレンド、なんて言う人が多いですね。 で、そうなりつつあるのはわかるんですが、だからといって、今の企業サイトもそうだし、クライアントが全てトレンドを求めてる訳ではなく、テイストは案件によって出し方を柔軟にする事が大事なんです、と思っています。 今回、アップルのサイトのグローバルナビゲーションをマネしてみましょう。 シンプルだけど、拡大してみると案外細かい線が凹凸感を出していて、心地よい立体感を演出してくれています。 ここで大事なのが、「溝」。だと感じました。 地味な存在で目立たないけど、ここもこだわってデザイナーとしてのクオリティを上げてみたいな、と。
WordPressのページナビゲーションをPC版とスマホ版で最適化したい *Ateitexe
昨日、WordPressプラグインWP-PageNaviをスマホで押しやすいレイアウトにという記事を書いたばかりなのですが、良いカタチを目指してもうちょっとテコ入れ…。 前後ページへのリンクを分かりやすく 前のページ・次のページへのリンク、当初は「«」「»」で表していたんですが、これって、どうなの…？という気持ちがむくむくと…。やっぱりちゃんと文字で書いたほうがいいんじゃないのかな、と感じました。 WP-PageNaviだと一番外に実装できない 「前のページ」「…」「3」「4」「5」「6」「7」「…」「次のページ」みたいな形の方が分かりやすいんじゃないかなと思うんですが、今のままだと実装できないので、プラグインなしでやってみることにしました。 スマホ版は、そんなにたくさんいらないんじゃ…？ 「最初」「前のページ」「現在」「次のページ」「最後」くらいが好き、というお話をtwitterで伺って
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
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
Twenty Eleven のシングル記事にサイドバーを1分で表示する2つの方法
こんばんわぷー。Twenty Eleven はいとをかしなテーマなわけですが、シングル記事や（ショーケーステンプレートを除く）ページにサイドバーがなく、ワンカラムになっている点が気に入らない、という方も多いようです。 先日の WordBench 川崎勉強会でも西川さんが悩んでいたのですが、その時にご紹介した方法にもう一つ追加してまとめてみました。 必要なことは以下の2つです。 single.php/page.php に get_sidebar(); を追加する CSS を調整して、サイドバーの表示される余地を作る …なのですが、Twenty Eleven テーマをそのまま書き換えると、テーマのバージョンアップの際に苦労は水の泡になります。あと、CSS の変更、結構めんどいです。なので、以下の簡単な方法をオススメします。 Twenty Eleven Theme Extension プラグイン
ナビゲーションが斬新な３０のサイト:phpspot開発日誌
30 Creative Websites With Unusual Navigation | OurTuts.com ナビゲーションが斬新な３０のサイト。 ナビゲーションというと一般的なデザインのパターンは決まっていて、それはそれで使いやすくていいんですが、ナビゲーションにも個性と面白さを出したいという際に参考にできるかも。 あまり他で見ないような斬新なナビゲーションを頭の片隅においておくと、いざ変わったものを作ろうと思った時に製作のヒントとなるかも 利便性も個性も兼ね備えたナビゲーションはPinterestのように広く使われるようになっていく気がしますね。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 綺麗にデザインされたピクトグラムアイコン100個セット Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressをCMSとして利用する際、固定ページの親ページと子ページに共通のナビゲーションを作るTips