【コーディング備忘録】CSSで文字を縁取る

cssの進化が凄まじい昨今。cssだけで作ったスロットゲームなんてのもあったりします。

私は加工の施された見出しを実装する際、基本はSVGやPNGで書き出す事が多いのですが、これはcssで出来るのだろうか？とふと疑問に思ったものが出てきました。

それが縁取り文字。

調べてみたら3パターン見つかったのですが、今回はcssだけでサクッと実装できる方法を２つご紹介します！

その①「text-stroke」を使って文字を縁取る

text-stroke: 1px #000;
-webkit-text-stroke: 1px #000;

白文字に黒のtext-strokeをかけています。

こちらは文字の内側に縁取られるため、太さを5pxにすると以下のようにつぶれてしまうので注意が必要ですね。

ちなみに、IEは非対応だそう…。

その②「text-shadow」を使って文字を縁取る

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

文字の上下左右に影をつける方法です。

よーく見ると文字の角の線が繋がっていません。ちょっと不自然かも。

先程のコードの「text-shadow」１行目を3pxにして、右下に影を落としてみました。これは遊べる！

IE10以降であれば対応しているようなので、意外と実用的かもしれませんね。

text-strokeとtext-shadowをかけ合わせておしゃれな版ズレ文字を作っている方もいました。

おわりに

工夫次第で色んな表現ができるんだな〜と改めてcssに無限の可能性を感じ、感心してしまいました。

非対応ブラウザなどの制限はありますが、そのうち実務で役立つ日がくるかもしれません。

参考サイト：　CSSで簡単に縁取りされたアウトライン文字を作る

▼ Webデザインもコーディングもこれ１冊で学べます！オススメ。