文字に影をつける (影付き文字の表示) - CSS
CSSを利用して影付き文字を表示するコードを紹介します。
概要
CSSで影付き文字を表示するには text-shadow を利用します。
書式
text-shadow : (x方向の距離) (y方向の距離) (ぼかしのサイズ) (影の色);
カンマで区切ることで、影を複数表示することもできます。
text-shadow : (影1x方向の距離) (影1y方向の距離) (影1ぼかしのサイズ) (影1の色), (影2x方向の距離) (影2y方向の距離) (影2ぼかしのサイズ) (影2の色), ... , (影nx方向の距離) (影ny方向の距離) (影nぼかしのサイズ) (影nの色);
記述例
text-shadow: 2px 2px 1px #808080;
text-shadow: 4px 6px 2px blue;
text-shadow: 3px 3px 1px gray, 8px -6px 2px #30E0C0;
例1
コード
下記の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ブラウザで表示すると下図の画面が表示されます。
例2
コード
下記の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ブラウザで表示すると下図の画面が表示されます。
例3:影を複数表示する場合
コード
下記の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ブラウザで表示すると下図の画面が表示されます。
例4:影を複数表示する場合
コード
下記の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ブラウザで表示すると下図の画面が表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
