CSSでフォントの縁取りをしたく、軽く調べたので備忘録も兼ねてメモを残す。

ググってみたところtext-shadowで下記のように記述するようだ。

{
text-shadow:-1px -1px #999,
             1px -1px #999,
            -1px  1px #999,
             1px  1px #999;
}

まず普通に「あいうえお」と表記した場合。分かりやすいようにフォントサイズは大きめで30pxにした。

あいうえお

続いて、フォントサイズ30pxでcolorは白で、上記のtext-shadowを加えた場合はこんな感じ。

あいうえお

16進数のカラーコードでは、#ffffffが白で、#000000が黒なので、中間のグレーに関しては下記の順番で濃くなる。

#ffffff
#eeeeee
#dddddd
#cccccc
#bbbbbb
#aaaaaa
#999999
#888888
#777777
#666666
#555555
#444444
#333333
#222222
#111111
#000000

細かく言うと#000000 → #010101 → #020202・・・だが割愛する。

2桁ずつ左からRGBなので、2桁が同じ場合は、1桁に省略が可能である。#000000 → #000

RGBなので赤だけ色を出したい場合は#ff0000（#f00）である。

{
text-shadow:-1px -1px #f00,
             1px -1px #f00,
            -1px  1px #f00,
             1px  1px #f00;
}

あいうえお

フォントの縁取りの話なのか、カラーコードの話なのか良く分からなくなってしまったが、記録用にメモを残しておく。