CSS の text-shadow でテキストに影を付けてみる

CSS でテキストにシャドウを付けるサンプルを作ってみた。

サンプルコード ———————————————————————-

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Text Shadow</title>
<style type="text/css">
<!--
body {
    background-color: #999999;
}
h1 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    text-shadow: #36414d 0 2px 3px;
    text-transform: uppercase;
    font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif;
}
-->
</style>
</head>
<body>
<h1 id="i-0">Text Shadow</h1>
</body>

実際の動作サンプル ———————————————————————-

CSS でテキストにシャドウを付けるサンプル

今の所、表示が確認できたのは、Safari 2.0.3 だけでした。他のブラウザもバージョンアップすれば表示できる様になるんだろうか…。

2 COMMENTS

HKK

残念ながら、text-shadow は Safari 2 専用です。 Windows IE 用には独自拡張として各種エフェクトがあります。

双方とも Mozilla 系では意味をなさない拡張です。

Bowz

コメント&情報ありがとうございます。 Safari 2 専用だったんですね。知りませんでした。 ブラウザの独自拡張って嫌なんですが、Safari ユーザーだけの特典って事で納得してみます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です