CSSで簡単に作れる袋文字

背景の画像で文字が読みにくい

背景の画像が単色でシンプルな場合は、白か黒のフィルターを付ければ視認性が良く読みやすくなります。

しかし、背景の画像が複雑だったり、白や黒が混在している時は、白黒どちらかに寄せると良いという訳ではなくなってきます。

そう言う時に使える袋文字

袋文字とは、文字のフチを別の色で彩色した文字です。

こんな感じ

黒字の周りに白いフチがついているのがわかりますか？

これを使えば背景を気にせず、画像の上に文字を記載できます。

ただし、文字が太くなるので全体の印象が変わってしまったりするので、多用はしないほうが良いです。

CSSはこうやって記述する

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

全て text-shadow で完結の簡単なCSSです。

解説すると

右下、左上、
左下、右上、
下、上、
左、右

この順番で1pxずつ #FFFの色の影を与えてる。というCSSです。