ホーム　＞　小技集　＞

ホームページの小技：その９（文字に影を付ける）

文字に影を付けてタイトル風にアレンジしてみます。画像で作るより断然軽く仕上がりますよ。
InternetExplorer４以上　（４ではまだ厳しいらしい・・）

広告

例）サンプル１（立体的な影）

以下を記述します
<SPAN STYLE="width:100%;line-height: 200% ;filter:Shadow( color=gray, direction=45 )"> 誰でも解る無料ホームページ作成講座 </SPAN>
解説）
color=gray,　　影の色を設定しています（ここではグレー。１６進数表記でもOK）
direction=45　影の角度を指定（真上を０度とした場合の角度を記述）

HTMLで定義されている色の名前
■ Black (#000000) ■ Gray (#808080) ■ Silver (#C0C0C0) □ White (#FFFFFF)	■ Red (#FF0000) ■ Yellow (#FFFF00) ■ Lime (#00FF00) ■ Aqua (#00FFFF)	■ Blue (#0000FF) ■ Fuchsia (#FF00FF) ■ Maroon (#800000) ■ Olive (#808000)	■ Green (#008000) ■ Teal (#008080) ■ Navy (#000080) ■ Purple (#800080)

文字の部分にFONTタグで大きさや、色、書体等を設定できます。

例）サンプル２（普通の影）

以下を記述します
<SPAN STYLE="width:100%;line-height: 200% ; filter:DropShadow( color=silver, offX=3, offY=5 )"> 誰でも解る無料ホームページ作成講座 </SPAN>
解説）
color=silver,　影の色を設定しています（ここではシルバー。１６進数表記でもOK）
offX=3,　　　　右：影の位置（マイナスを入力すれば左）
offY=5 　　　　下：影の位置（マイナスを入力すれば上）
文字の部分にFONTタグで大きさや、色、書体等を設定できます。

ホーム　＞　小技集　＞