表示位置の指定を使って文字を影付きにする1
P、DIV などのブロックタグで括られた文字や文章などを、表示位置を指定を使って 影付きのように見せることができます。
文字に影を付けるには専用のスタイル指定がありますが、Netscape が対応していません。この方法は、 非対応ブラウザでも見映えを損なわないようにするのに有効です。
影付きSAMPLE
影付きSAMPLE
このサンプルは、2つの段落に同じ文字を表示し、2つ目の段落が1つ目の段落に覆い被さるように表示位置を指定した上、文字色を変えることで、1つ目の段落の影のように見せています。
このため、Netscape などのフィルター効果が有効でないブラウザでも同じように見せることができます。
このソースは、次のようになります。
<style type="text/css">
<!--
.sampleover {
</style>
<div class="sampleunder">影付きSAMPLE</div>
<div class="sampleover">影付きSAMPLE</div>
<!--
.sampleover {
font-size:24px;
font-weight:bold;
color:#FFD700;
line-height:1em;
position:relative;
top:-27px;
left:-3px;
}
.sampleunder {font-weight:bold;
color:#FFD700;
line-height:1em;
position:relative;
top:-27px;
left:-3px;
}
font-size:24px;
font-weight:bold;
line-height:1em;
color:#FF8C00;
}
-->font-weight:bold;
line-height:1em;
color:#FF8C00;
}
</style>
<div class="sampleunder">影付きSAMPLE</div>
<div class="sampleover">影付きSAMPLE</div>
『表示位置を指定する』の基本は、こちらをご覧ください。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス