text-shadowを使った文字の縁取り

今回はcss3のtext-shadowを使った文字の縁取りについてです。

デザインした文字なんて画像を表示していけば良いなんて考えてしまうんですが、
画像を多用すると結果、HTML的にスカスカなサイトができてしまいます。
検索対策的にも文字の情報で構成した方が好ましい。

なので、多少の装飾であればcssで再現してしまおう
という時に活躍するのがこの縁取り表現。

text-shadowの構成するパラメータはこちら

text-shadow: 1px/*　横方向　*/ 3px/*　下方向　*/ 5px/*　ぼかし　*/ #000/*　影の色　*/; 

左から横方向のズレ、下方向のズレ、ぼかし具合、影の色味を設定できます。

なので、上記のcssをかけるとこの様になります。

この影の表現を4方向に指定する事で疑似的に縁取りに見せることができます。

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

左右上下それぞれにぼかし無しの線を表示して文字を囲っています。

このCSSをかけると

このように縁取りを付ける事ができました。

デザインを再現する上で画像で処理すれば簡単なのですが、
後々に文言が変わる等して修正する場合、
また１から画像を作成しなくてはなりません。

そういった場合でも今回の表現を使うとHTMLを修正するだけで変える事ができるので
ちょっとした縁取りの場合、このような表現を導入すると良いです。