確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション

Flashはもちろん、jQueryなどのJavaScriptも使用せずに、CSS3アニメーションのかっこいいナビゲーションを実装するチュートリアルを紹介します。

Creative CSS3 Animation Menus

[ad#ad-2]

• かっこよすぎる10種類のデモ
• 実装

かっこよすぎる10種類のデモ

デモは全部で10種類あり、どれもかっこいいので是非見てください。
対応ブラウザはChrome, Safari, Firefox, Operaで、IEは10でいけるようになるでしょう。

Example 1
エレメントのサイズ変更、背景カラーを変更。

Example 2
アイコンのサイズ変更、テキストを天地からスライド。

Example 3
アイコンを回転・拡大、テキストと背景のカラーを変更。

Example 4
背景のカラー変更、エレメントを天地からスライド。

Example 5
アイコンとテキストを左右からスライド、サブテキストを下からスライド。

Example 6
背景をフラッシュし、アイコンを拡大、テキストを回転しながらスライド。

Example 7
背景をフラッシュし、下からスライド、サブテキストに背景を設定。

Example 8
背景とエレメントのカラーを変更し、サイズも変更。

Example 9
回転しながらサイズとカラーを変更。

Example 10
エレメントのサイズとカラーを変更し、重なり順も変更。

実装

HTML

HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。

<ul class="ca-menu">
	<li>
		<a href="#">
			<span class="ca-icon">A</span>
			<div class="ca-content">
				<h2 class="ca-main">Exceptional Service</h2>
				<h3 class="ca-sub">Personalized to your needs</h3>
			</div>
		</a>
	</li>
	...
</ul>

[ad#ad-2]

CSS

アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

アイコンをフォントにする大きな利点はtext-shadowなどのエフェクトを適用できることです。

リスト要素の基本的なスタイルは、下記のようになります。

.ca-menu{
    padding: 0;
    margin: 20px auto;
    width: 500px;
}

元記事では、各デモごとのスタイルシートや、デモファイルを一式ダウンロードできます。

• Creative CSS3 Animation Menus