ホーム > Expression Web > Expression Web 4 SP1でCSS3ナビゲーションをデザインする

Expression Web 4 SP1でCSS3ナビゲーションをデザインする

Expression IQ 翻訳記事
Pad [著], わにちゃん@ExpressionTech.jp[訳・編集]
2011年5月25日 from Expression IQ

はじめに

CSS3以上の丸い枠線、Expression Web 4 SP1でサポートされるCSS3プロパティの一覧は、現代のブラウザにおけるほとんど、そうでなければすべての能力を超えていることが多いです。

前回の記事では、Expression Web 4 Service Pack 1の新しいCSS3の機能を少しだけお話し、border-radiusプロパティの能力をデモしました。今回は、CSS3の注意をつかむ新機能について触れ、ほとんどの現代のブラウザで正しく表示する方法について見ていきましょう。

それぞれのブラウザのエンジンと対応するプロパティ

CSSの興味深い機能の一つが、transformプロパティです。適宜、transformプロパティはページに視覚効果を追加できます。この記事で、退屈で汚いメニューと変換を取り除いて、もうすこし面白くしていきましょう。

コードに深く追求する前に、注意すべき点として、CSS3がまだ草稿段階にあるので、レンダリングエンジンに特有したCSS3ブラウザの実現が不完全であるということです。とりわけ、プロパティの名前を書くのにCSS3スタイルを書くには、それぞれのレンダリングエンジンに応じたブラウザ固有の接頭語を含んだプロパティの名前を定義づけます。

ブラウザー エンジン プロパティ
Internet Explorer Internet Explorer -ms-transform
Firefox Gecko -moz-transform
Safari/Chrome WebKit -webkit-transform
Opera Opera -o-transform

これは厄介に見えるとはいえ、この記法は特定のプロパティがほとんどの主要の現代のブラウザで正しく表示するのを助けるでしょう。

ナビゲーションリストを作成する

ナビゲーションリストをはじめましょう:

<div id="menu">
  <ul>
    <li><ahref="#">Home</a></li>
    <li><ahref="#">Home</a></li>
    <li><ahref="#">On</a></li>
    <li><ahref="#">The</a></li>
    <li><ahref="#">Range</a></li>
  </ul>
</div>

そして、ナビゲーションを視覚的に変化させるために、a:hover プロパティを含めたいくつかの基本のスタイルを適用します。

#menu li {
   width: 60px;
   color: #FFF;
   list-style: none;
   background-color: #039;
   padding: 5px 10px;
   border: 4px solid #DEF;
}
#menu li:hover {
   background-color: #06C;
}

その結果、このように見えます。

トランスフォームを追加する

では、いくつかの面白いエフェクトを生成するために :hover スタイルプロパティにトランスフォームを追加しましょう。

transformプロパティは、トランスフォーム機能に数値を用いることができることに注意してください。移動、スケール、回転および傾斜は基本的な2次元機能です。また、translate機能は座標XとYの順序で適用することに注意します。translate, translateX, translateY,scale, scaleX, scaleY, rotate,skewX, skewY, そして最後に skewです。あなたが推測するように、translateX, translateY, scaleX, scaleY, skewX, そして skewY は移動(translate)、回転(rotate)およびスケール(scale)の制約つきバージョンです。

また、この例は、ブラウザー固有のプレフィックスを使用することにも注意してください。

#menu li:hover {
  background-color: #06C;
  -ms-transform: translate(10px);
  -moz-transform: translate(10px);
 -webkit-transform: translate(10px);
  -o-transform:translate(10px);
}

これで、ホバーメニュー項目を右に10ピクセル移動します。

トランス フォームを 1 つ以上の関数を宣言するには、単に、追加の関数(の順序で)変換ステートメント に追加します。たとえば、スケール関数を次のように追加します。

#menu li:hover {
  background-color: #06C;
  -ms-transform:translate(10px) scale(1.5);
  -moz-transform:translate(10px) scale(1.5);
-webkit-transform: translate(10px) scale(1.5);
  -o-transform:translate(10px) scale(1.5);
}

より多くの機能を追加します:

#menu li:hover {
  background-color: #06C;
  -ms-transform:translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
  -moz-transform:translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
-webkit-transform: translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
  -o-transform:translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
}

box-shadowプロパティを追加する

最後に、楽しみのためにマウスに触れたときの要素に枠線の色を編集し、box-shadowプロパティを追加します:

#menu li:hover {
  background-color: #06C;
  -ms-transform:translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
  -moz-transform:translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
  -webkit-transform: translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
  -o-transform:translate(10px) scale(1.5) rotate(-5deg) skew(-5deg);
  border: 4px solid #FF0;
 -ms-box-shadow: 1px 0 8px 0 #000;
  -moz-box-shadow: 1px 0 8px 0 #000;
  -webkit-box-shadow: 1px 0 8px 0 #000;
  -o-box-shadow: 1px 0 8px 0 #000;
}

borderプロパティはbackground-colorプロパティに似ていて、以前のCSSのバージョンからきたのでブラウザ特有の接尾語を必要としません。

そしてそれがあります。適度に複雑なナビゲーション メニューは — 昨年として最近 — グラフィックスを使用するのを必要とします。

今度の記事では、私は1ページの要素を選択する新しい方法のアニメーション、変遷、勾配などに注目するつもりです。

記事元:Expression IQDesigning CSS3 Navigation in Expression Web 4 SP1

Expression Web 最新記事

コメント

▲このページのトップへ