テキスト（文字）に影をつける

2018年5月2日

テキスト（文字）に影（ドロップシャドウ）をつけるにはtext-shadowプロパティを使用します。

[書式] text-shadow: 横方向のずれ　縦方向のずれ　ぼかし量　色;

横方向のずれはプラス値が右へ、マイナス値が左へずれます。
縦方向のずれはプラス値が下へ、マイナス値が上へずれます。

縦横のずれの大きさを変更した例

まずは、ぼかし量0の状態で縦横のずれの大きさを1px～5pxまで変更した例です。

[HTML]

<body>
    <h1 class="logo-sh1">サンプル1</h1>
    <h1 class="logo-sh2">サンプル2</h1>
    <h1 class="logo-sh3">サンプル3</h1>
    <h1 class="logo-sh4">サンプル4</h1>
    <h1 class="logo-sh5">サンプル5</h1>
</body>

[CSS]

h1 {
	font-size: 50px;
	font-weight: bold;
	color: #0ff;
	margin: 0;
	padding: 0;
	line-height: 1.2em;
}
.logo-sh1 { text-shadow: 1px 1px 0px #000; }
.logo-sh2 { text-shadow: 2px 2px 0px #000; }
.logo-sh3 { text-shadow: 3px 3px 0px #000; }
.logo-sh4 { text-shadow: 4px 4px 0px #000; }
.logo-sh5 { text-shadow: 5px 5px 0px #000; }

[ブラウザ表示]

サンプル1

サンプル2

サンプル3

サンプル4

サンプル5

好み次第ですが、この文字の大きさではサンプル3あたりまでのずれにしたほうが良いでしょうね。サンプル4以上ですと「プ」のずれが少し大きく目立ってるかなと思います。

ぼかし量を変更した例

縦横のずれはサンプル3をベースとして今度はぼかし量を1px～5pxまで変えてみた例です。

[HTML]

<body>
    <h1 class="logo-sh3b1">サンプル3 ぼかし1</h1>
    <h1 class="logo-sh3b2">サンプル3 ぼかし2</h1>
    <h1 class="logo-sh3b3">サンプル3 ぼかし3</h1>
    <h1 class="logo-sh3b4">サンプル3 ぼかし4</h1>
    <h1 class="logo-sh3b5">サンプル3 ぼかし5</h1>
</body>

[CSS]

.logo-sh3b1 { text-shadow: 3px 3px 1px #000; }
.logo-sh3b2 { text-shadow: 3px 3px 2px #000; }
.logo-sh3b3 { text-shadow: 3px 3px 3px #000; }
.logo-sh3b4 { text-shadow: 3px 3px 4px #000; }
.logo-sh3b5 { text-shadow: 3px 3px 5px #000; }

[ブラウザ表示]

サンプル3 ぼかし1

サンプル3 ぼかし2

サンプル3 ぼかし3

サンプル3 ぼかし4

サンプル3 ぼかし5

ぼかし量も好みによりますね。個人的に影っぽくみえるのはぼかし3以上かなぁ。

応用例

text-shadowの値は「,」で区切ることで複数定義できます。重ねるイメージですね。

下記、例ではtext-shadowを上下左右に3pxずらしてぼかしを6px、色に透明度を入れて薄く文字全体を囲むようにしてみました。4枚重ねているイメージになります。

[HTML]

<body>
    <h1 class="logo-sh3b5-all">サンプル3 ぼかし5</h1>
</body>

[CSS]

.logo-sh3b5-all {
	text-shadow: -3px  0px 6px rgba(0,0,0,0.5), /* 左 */
	              3px  0px 6px rgba(0,0,0,0.5), /* 右 */
	              0px -3px 6px rgba(0,0,0,0.5), /* 上 */
	              0px  3px 6px rgba(0,0,0,0.5); /* 下 */
}

[ブラウザ表示]