ページ上のさまざまな要素やコンポーネントにclassを加えるだけで、CSS3アニメーションを適用できるスタイルシートを紹介します。 既存のナビゲーションやボタンにちょっとアニメーションを与えたい時にも最適です。 HTMLにclassを加えて汚したくない人は、jQueryやスクリプトでclassを加えて、クリーンな実装もできます。
スタイルシートで実装するレスポンシブ用のナビゲーションを表示する7種類のアニメーションのエフェクトを紹介します。 コンテンツをスライドして横からナビゲーションを表示するOff Canvasのスタイルは、去年あたりから数多くのサイトで見かけるようになりましたね。 Pure CSS Responsive Nav HTML ベースとなるHTMLは、下記のようにシンプルです。 <nav id="pushLeft"> <body> <nav id="pushLeft"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> </nav> <div class="container">コンテンツ</div> </body> デモでは7種類のエフェクトが楽しめます。スライドするものをはじめ、ぺらっと
コマ数を落としているから、アニメがうまく見えてないかも タブコンテンツはシンプルながら、さりげないアニメーションが仕込まれておりいい感じです。上記はgifアニメーションで、実際のデモは下記ページで確認できます。 Pure CSS Tabs タブ切替のトリックは、ラジオボタンです。タブとして表示されているラベルをクリックするとラジオボタンがチェック状態になり、コンテンツが表示されます。 HTML タブとコンテンツは1セットでリスト要素で実装します。 <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">タブ 1</label> <div id="tab-content1" class="tab-content"> <p>コンテンツ 1</p> </div> <
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています。 <nav> <menu> <li><a href="#">☀</a></li> <li><a href="#">✈</a></li> <li><a href="#">❄</a></li> <li><a href="#">☎</a></li> </menu> </nav> <nav class="menu2"> <menu> <li><a href="#">home</a></li> <li><
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く