キレイな縁取り文字をtext-shadowプロパティとCSS変数で作る

CSSで縁取り文字を作る方法はいくつかありますが、今回は、text-shadowプロパティとCSS変数 (カスタムプロパティ) を使用したものを紹介します。

text-shadowプロパティを使用したよくある方法

text-shadowプロパティは、offset-x (X軸方向のオフセット)、offset-y (Y軸方向のオフセット)、blur-radius (ぼかし)、color (色) の4つの値を1セットとして、カンマ区切りで複数設定できます。

よくある方法は、offset-x と offset-y を使用して、文字の周りに影を作り縁取ります。

.text-outline {
  color: #fff;
  text-shadow:
    -1px -1px #000 /* 左上方向の影 */,
     0px -1px #000 /* 上方向の影   */,
     1px -1px #000 /* 右上方向の影 */,
     1px  0px #000 /* 右方向の影   */,
     1px  1px #000 /* 右下方向の影 */,
     0px  1px #000 /* 下方向の影   */,
    -1px  1px #000 /* 左下方向の影 */,
    -1px  0px #000 /* 左方向の影   */;
}

この方法の欠点は、文字を拡大してみるとよく分かるのですが、縁取りの厚みが均一ではなく、角の部分がギザギザになってしまうことです。

縁取りの厚みに関しては、左上方向、右上方向、右下方向、左下方向の値を 1px ではなく 1px / √2 (1.41421356237) ≒ 0.7071px にするといい感じで表示されますが、ギザギザはどうにもなりません。

.text-outline {
  color: #fff;
  text-shadow:
    -0.7071px -0.7071px #000 /* 左上方向の影 */,
          0px      -1px #000 /* 上方向の影   */,
     0.7071px -0.7071px #000 /* 右上方向の影 */,
          1px       0px #000 /* 右方向の影   */,
     0.7071px  0.7071px #000 /* 右下方向の影 */,
          0px       1px #000 /* 下方向の影   */,
    -0.7071px  0.7071px #000 /* 左下方向の影 */,
         -1px       0px #000 /* 左方向の影   */;
}

text-shadowプロパティでキレイに縁取る方法

結論から言うと、blur-radius (ぼかし) を重ねて縁取ります。

.text-outline {
  color: #fff;
  text-shadow:
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000,
    0 0 1px #000;
}

ここでは、36回も重ねているため、くっきり表示されます。もちろん、縁取りの厚みは均一で、角のギザギザもありません。

ただ、CSSコードがダメすぎます。これでは他のバリエーションへの応用もできません。そこで、CSS変数 (カスタムプロパティ) を使用します。

[class*="__text-outline__"] {
  --x: 0 0 var(--text-outline--width, 1px) var(--text-outline--color, #000);
  --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x) /* 6 */;
  text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y) /* 6 * 6 = 36 */;

  color: #fff;
}
.__text-outline__thick {
  --text-outline--width: 2px;
}
.__text-outline__red {
  --text-outline--color: #800000;
}

かなりスッキリしましたね。更に、縁取りの太さと色のバリエーションも追加できました。

CodePen による表示

〆

CSS変数の界王拳っぽい使い方の紹介でした。