CSS で縁取り文字

CSS で縁取り文字

画像を使わずに CSS だけで文字を縁取りして、白抜き文字や黒抜き文字を作ることができます。いくつかバリエーションがあるのでコードとともにご紹介いたします。


基本書式

文字に縁取りをつけるには text-shadow を使います。text-shadow は文字に影を付けるもので、影をうまく利用して縁取りを描画することになります。

text-shadow: 右位置 左位置 ぼかし 色;

つまり、 text-shadow:2px 5px 1px #900; で、右に 2 px、左に 5 pxずらした位置に、1 px ぼかして、#900 で影を付ける、という内容になります。

出力結果:

text-shadow のサンプル文字

さて、上記を踏まえて、いくつか例を作っていきましょう。

1px の縁取り

text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;

出力結果:

text-shadow のサンプル文字

2px の縁取り

text-shadow: 2px 2px 1px #036, -2px 2px 1px #036, 2px -2px 1px #036, -2px -2px 1px #036, 2px 0px 1px #036, 0px 2px 1px #036, -2px 0px 1px #036, 0px -2px 1px #036;

出力結果:

text-shadow のサンプル文字

白縁文字(2px)

text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff;

出力結果:

text-shadow のサンプル文字

黒光彩

text-shadow: 1px 0 4px #000, 0 1px 4px #000, -1px 0 4px #000, 0 -1px 4px #000;

出力結果:

text-shadow のサンプル文字

rgba()で透明度を指定した光彩

text-shadow:1px 0 4px rgba(255,215,0,0.66), 0 1px 4px rgba(255,215,0,0.66), -1px 0 4px rgba(255,215,0,0.66), 0 -1px 4px rgba(255,215,0,0.66);

出力結果:

text-shadow のサンプル文字

rgba() での色の指定は、rgba(赤,緑,黄,透明度0~1) という書式です。