ホームページ作成ガイド

テキストに影を付ける

<html>
<head>
<title>テキストに影を付ける</title>
<STYLE TYPE="text/css">
<!--
.shadow {
filter: shadow(color=#999999, direction=135);
width: 100%;
height: 20px;
}
-->
</STYLE>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<b>普通の文字です。</b><br>

<b><span class="shadow">影をつけた文字です。</span></b><br>

</body>
</html>

テキスト文字に影を付けます。
画像ではないので、編集が簡単な上に検索エンジンの対象になるという効果があります。WindowsのIE限定です。

<HEAD></HEAD>内に上記CSSを記述します。

これはshadowというフィルターで、グラデーションの影を付けます。
colorで影の色、directionで角度を設定します。
角度は0(上)、45(右上)、90(右)、135(右下)、180(下)、225(左下)、270(左)、315(左上)を設定できます。

影の部分を含めたスペースを確保しないといけないので、width: 100%;、height: 25px;で、スペースを設定しています。

そして影を設定したいテキストを<span class="shadow"></span>で囲みます。

ホームページ作成ガイド

© INFI

ホーム | サイトについて | サイトマップ