CSS3なら簡単！ アニメーションするリングメニューを作る | CSS-EBLOG
CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
コンパクトな月間アーカイブメニューを作ってみる
よくブログのサイドバーやフッターなんかで見かける月間アーカイブメニューですが、ちょっとスペース取りすぎだと思っています。 そんなアーカイブメニューですが、素敵なデザインを見かけましたので、そのデザインを参考にして自分なりにコンパクトなアーカイブメニューを作ってみました。 参考にしたのは以下のサイトです。 Devin’s Heaven どんなコードかまでは確認していませんが、こういう方法があったか、と思いました。 自分で作ってみたものは以下です。 Compact Archive w/ jQuery デモファイルをダウンロード HTML部分は次の通り。 ちょっとマークアップがアレな感じでごめんなさい。 <div class="archives"> <div class="year-select"> <ol> <li><a href="#year2011">2011</a></li> .....
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
