文字に影を付ける【Safari】

動作ブラウザ 【 IE:-  NN:-】 ■CSSバージョン【2】
Internet Explorer Netscape Navigator iCab Opera Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.x 6.0 2.x 7.x 1.x
Windows × × - × × × × × × × -
Macintosh × × × × - - × × × × × ×
UNIX - - - - - - × × × × -

ポイント .tShadow { text-shadow:3px 3px #8080ff; }
説  明 文字に影を付けるにはtext-shadowを使います。最初がX方向の影の移動量、次がY方向の影の移動量、最後が影の色になります。X, Y座標は右下にいくに従って値が大きくなります。
サンプル <html>
<head>
<title>文字に影を付ける【Safari】</title>
<style type="text/css"><!--
.tShadow { text-shadow:3px 3px #8080ff; }
--></style>
</head>
<body>
<h1 class="tShadow">テキストシャドウ</h1>
<div class="tShadow" style="font-family:Impact">Text Shadow -----------</div>
<div>
 上の見出しには、うっすらと影がついています。
</div>
</body>
</html>
補足説明 Safari 1.1以降で動作します。CSS2.1では、このプロパティはなくなっています。CSS3では復活しています。

■サンプルを実行する >>実行
■各ブラウザでの動作結果を見る >>View!