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) という書式です。
