スタイルシートマニア
ナビゲーションメニュー(基本Ⅲ) | ホームページカスタマイズ Tips
今回はナビゲーションにボタンのような効果を付けてみます。
今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス(出っ張り)のような表現を演出する事にあります。
<div id="menu03"> <ul> <li><a href="http://source-marine.net/css-mania">ホーム</a></li> <li><<a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li> <li><a href="http://source-marine.net/source-branch/">>ソースブランチ</a></li> <li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li> <li><a href="http://source-marine.net/">ソースマリン</a></li> <li><a href="http://source-marine.net/production-rate.html">制作料金</a></li> </ul> </div>
#menu03 ul { width: 210px; } #menu03 li a { background: #ddd; width: 200px; height: 25px; padding-top: 5px; padding-left: 10px; border: 2px outset #ccc; display:block; text-decoration: none; color: #333; } #menu03 li a:hover { background: #fff; border: 2px inset #ccc; }
どうでしょう?ちょっと押してみたくなりませんか?(笑)
Author:hideo
Comments:0
« 前の記事 | 次の記事 » |