[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Serviсes</a> <a href="#">Contacts</a> </nav> CSS ナビゲーションの各アイテムはflexboxで配置し、くるくるっとしたアニメーションはtransformで設定します。 body { font-family: "Open Sans Condensed" sans-serif; display: -webkit-flex; display: -ms-fle
![[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a1595bf6696cf508a760fed6fa8ed736c886b2b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015010802.gif)
[CSS]ナビゲーションに明確なラベルを与えて実装するスタイルシート
dl要素で明確なラベルを与え、シンプルながらスタイリッシュなナビゲーションを実装するスタイルシートをZURBから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <dl> <dt>On This Page:</dt> <dd><a href="">Final Wireframes</a></dd> <dd><a href="">Updated Wireframes</a></dd> <dd><a href="">Initial Wireframes</a></dd> <dd><a href="">Sketches</a></dd> </dl> </textarea>
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集
