(25) 文字の縁取り

1,739 views

この記事は最終更新から 3233日 が経過しています。

上下左右にぼかし無しで影を付ければよい。

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

文字に縁取りを加える。

ぼかし有りだとこんな感じ。

text-shadow: -1px -1px 2px #222,
              1px -1px 2px #222,
             -1px  1px 2px #222,
              1px  1px 2px #222;

文字に縁取りを加える。

太くする場合は斜め方向だけでなく、上下左右方向にも影を付ける。

text-shadow: -2px -2px 0 #222,
              2px -2px 0 #222,
             -2px  2px 0 #222,
              2px  2px 0 #222,
             -2px  0   0 #222,
              2px  0   0 #222,
              0   -2px 0 #222,
              0    2px 0 #222;

文字に縁取りを加える。

でないとこうなる。

文字に縁取りを加える。

---