文字に影を付ける【Safari】 |
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! |