CSS3のアニメーション機能を利用してメニューを彩る

2010年3月 6日 14:30 | 個別ページ

小技の効いたサイトを発見しました。

このサイトで、左のメニューにカーソルを合わせると英語表記のところがゆっくりと色が変化していくのがわかると思います。トランジション効果と言えばよいのでしょうか、アニメーション処理がしてあります。

このサイトの場合は、画像のロールオーバー時に、JavaScriptでアニメーション処理をしていると思うのですが、今回画像なしで似たような動作をやってみます。CSS3とそれに対応しているブラウザを使用します。残念ながら現在はSafari4.0とGoogle Chomeしか動作しないようです。

サンプル

サンプルはこちらから

動作確認

Google Chrome 4.0、Safari 4.0.4 for Windows XPです。

CSS3はまだ正式勧告されていないので、使用する場合にはプロパティの前にベンダープリフィックスと呼ばれる接頭辞をつける必要があります。SafariおよびChomeは｢-webkit-｣です。

(X)HTMLコード

<ul>
<li><a href="concept.html">コンセプト<span><br />CONCEPT</span></a></li>
<li><a href="menu1.html">メニュー<span><br />MENU</span></a></li>
<li><a href="">新着・お得情報<br /><span>NEW&EVENTS</span></a></li>
<li><a href="">お問合せ・ご予約<br /><span>CONTACT</span></a></li>
<li><a href="info.html">店舗情報・地図<br /><span>INFORMATION</span></a></li>
</ul>

CSSコード

ul {
   width:200px;
   background:#735D4A;
   margin:0;
   padding:0 10px;
}

li {
   list-style:none;
   border-bottom:#524139 1px solid;
}

li:last-child {
   border-bottom:none;
}

li a {
   display:block;
   padding:15px 0 15px 30px;
   font-family:"ＭＳ 明朝",serif;
   color:#F7F3EF;
   font-size:14px;
   text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -moz-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -webkit-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   line-height:1.4;
   letter-spacing:1px;
   background:url("bg_list.gif") 10px 50% no-repeat;
   text-decoration:none;
   outline: none;
}

li a span {
   color:#080808;
   font-family: "arial",sans-serif;
   font-size:10px;
   text-shadow:none;
   -moz-text-shadow:none;
   -webkit-text-shadow:none;
   -webkit-transition-duration:0.4s;
}

li a:hover span {
   color:#F79239;
}

｢-webkit-transition-duration:0.4s｣というのがアニメーション部分の指定になります。メニューをマウスオーバーしたときに、英語表記の部分だけが0.4秒かけて色がゆっくりと変わります。

また、CSS3のテキストにシャドーをつけれる｢text-shadow｣、親子関係の最後の子要素だけに適用する｢:last-child｣も併せて使用しています。