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

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

動作サンプル

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>Text Shadow</h1>
</body>
</html>

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

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。