CSSで文字の縁取りをデザインする方法

画像の編集ソフトは使わずに、CSSだけで文字の縁取りをデザインする方法について解説します。

CSSで文字の縁取りをする方法は「text-stroke」を使う方法と「text-shadow」を使う方法があります。

text-strokeで縁取り文字をデザイン

text-strokeで文字の縁取りをデザインする場合は次のように書きます。

HTML
<h1 class=”stroke”>text-strokeで縁取り</h1>

CSS
.stroke {
　-webkit-text-stroke: 1px #fff;
　text-stroke: 1px #fff;
　color: rgba(0,0,0,0);
}

ただし、「text-stroke」はIEでは効かないので、次に紹介する「text-shadow」を使う方法の方がいいかもしれません。

text-shadowで文字の縁取りをデザインする場合は次のように書きます。

HTML
<h1 class=”shadow”>text-shadowで縁取り</h1>

CSS
.shadow {
　text-shadow:
　　1px 0 0 #fff,
　　0 1px 0 #fff,
　　-1px 0 0 #fff,
　　0 -1px 0 #fff;
　color: #28abb9;
}

この方法ならIEでも縁取り文字をデザインすることができますが、「text-stroke」でしていたように文字色を透過させることはできません。

背景が単色であれば、文字色を背景色と同じにすることで透過しているように見えますが、グラデーションや背景画像を使っている場合は、文字の縁取りをしつつ文字色を透明にすることは難しそうです。

関連記事
text-shadowで文字に影をつける【CSS】