CSSを利用して影付き文字を表示するコードを紹介します。
CSSで影付き文字を表示するには text-shadow を利用します。
カンマで区切ることで、影を複数表示することもできます。
text-shadow: 2px 2px 1px #808080;
text-shadow: 4px 6px 2px blue;
text-shadow: 3px 3px 1px gray, 8px -6px 2px #30E0C0;
下記のCSS,HTMLファイルを作成します。
p.ShadowText{
text-shadow: 5px 5px 2px #808080;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title>
</head>
<body>
<p class="ShadowText">影付き文字列です。</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。
下記のCSS,HTMLファイルを作成します。
p.ShadowText2 {
font-size:18px;
font-weight:700;
text-shadow: 2px 2px 1px #E0E0E0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title>
</head>
<body>
<p class="ShadowText2">影付き文字列です。</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。
下記のCSS,HTMLファイルを作成します。
p.ShadowText3 {
font-size: 24px;
font-weight: 700;
text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title>
</head>
<body>
<p class="ShadowText3">影付き文字列です。</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。
下記のCSS,HTMLファイルを作成します。
p.ShadowText4 {
font-size: 24px;
font-weight: 700;
text-shadow: 8px 8px 1px #A0A0A0, 24px 24px 6px #A0A0F0, 36px 36px 2px #ff6a00, 48px 24px 2px #99ff70;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TextShadow.css" />
<title></title>
</head>
<body>
<p class="ShadowText4">影付き文字列です。</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。
