[CSS]ホバー時のエフェクトに一工夫、リボン風デザインのナビゲーション
Post on:2012年3月8日
画像を一切使用せず、CSS3や擬似要素を使ったリボン風デザインのナビゲーションを実装するチュートリアルを紹介します。
[ad#ad-2]
デモ
デモはCSS3アニメーションに対応したブラウザ、Chrome, Safari, Firefoxでご覧ください。
CSS3アニメーション非対応のIE8/9ではアニメーション無し、擬似要素非対応のIE7ではリボン無しになります。
[ad#ad-2]
実装
HTML
HTMLはシンプルで、各アイテムをspan要素で実装し、全体をdiv要素で内包します。
<div class='ribbon'> <a href='#'><span>Home</span></a> <a href='#'><span>About</span></a> <a href='#'><span>Services</span></a> <a href='#'><span>Contact</span></a> </div>
CSS: リボン
CSSは分けて解説します。
まずは、ナビゲーション全体のリボン風のデザインを擬似要素で三角を作って再現します。
.ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #fff; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; }
CSS: リンク
各アイテムは同じ高さでフロートさせます。span要素の下の折り目を「overflow:hidden;」で隠します。
.ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; }
CSS: ホバー
ホバー時のアニメーションのスタイルシートです。
CSS3アニメーションでリボンが立体的になるようにします。
.ribbon span { background:#fff; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background, margin 0.2s; /* FF4+ */ -ms-transition: background, margin 0.2s; /* IE10 */ -o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */ transition: background, margin 0.2s; } .ribbon a:hover span { background:#FFD204; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; }
sponsors