実践テクニック: 透明度の別な考え方
透明度を指定するということは，
RGBaプロパティバリューを利用したナビゲーションはコードをシンプルてるメリットがあります。
リスト11 ロールオーバーするナビゲーション
<ul>
<li><a href="" title="">ホーム</a></li>
<li><a href="" title="">ボストンの観光地</a></li>
<li><a href="" title="">ボストンのホテル</a></li>
<li><a href="" title="">ボストンの食事</a></li>
<li><a href="" title="">ボストンの地図</a></li>
</ul>
リスト12 ロールオーバーするナビゲーション
html {
font: normal normal normal 12px/1.5 Verdana, Osaka, sans-serif;
}
a {
text-decoration: none;
}
ul li {
display: inline;
float: left;
}
ul li a {
display: block;
padding: 10px 15px;
background-color: rgba(65, 89, 104, .9);
color: #f7f7f7;
}
ul li a:hover {
background-color: rgba(65, 89, 104, .5);
color: #fff;
}
RGBaプロパティバリューをサポートしているブラウザで次のように表示されます。
図7 ロールオーバーするナビゲーションの表示結果
図8 ロールオーバーするナビゲーションの表示結果
立体感のあるナビゲーション
さらに一手間をかけ，
図9 テキストにtext-shadowプロパティをかけて立体感を演出
実践テクニック：RGBaを0から1へ戻す
RGBaプロパティバリューとOpacityプロパティは透明度を指定し透明にするというプロパティです。しかし逆に透明度を戻すという不透明度を指定するという，
例えば，
リスト13 RGBaを0から1へ戻すサンプル
<ul>
<li>
<img src="images/boston-sunset.jpg" alt="写真 ボストンの夕焼け" title="ボストンの美しい夕焼けの写真" />
<em>Merry Christmas !! <br />Happy holidays for Gihyo readers !!</em>
</li>
</ul>
リスト14 RGBaを0から1へ戻すサンプル
html {
font: normal normal normal 12px/1.5 Verdana, Osaka, sans-serif;
}
ul {
position: relative;
border: 1px solid #f7f7f7;
}
ul li {
list-style-type: none;
}
ul li em {
position: absolute;
display: block;
width: 460px;
height: 335px;
top: 0px;
left: 40px;
padding: 20px;
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; /*フォントを少しクリスマスの雰囲気に*/
font-size: 40px;
color: rgba(247, 247, 247, 0); /*透明度を0に指定して，透明に指定*/
background-color: rgba(0, 0, 0, 0); /*背景色も予め0に指定して，透明に指定*/
}
ul li em:hover {
color: rgba(247, 247, 247, 1); /*透明度を1に指定して，完全に不透明に指定*/
background-color: rgba(0, 0, 0, 0.6); /*背景色を60％*/
}
RGBaプロパティバリューをサポートしたブラウザでは，
図10 RGBaの透明度を0から1へ戻すサンプルの表示結果
図11 RGBaを0から1へ戻すサンプルの表示結果
以上のように，
次回は，