実践テクニック: 透明度の別な考え方
透明度を指定するということは,
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プロパティバリューをサポートしているブラウザで次のように表示されます。
立体感のあるナビゲーション
さらに一手間をかけ,
実践テクニック: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プロパティバリューをサポートしたブラウザでは,
以上のように,
次回は,