画像の上の文字を目立たせる方法｜【Web制作解説】｜プログラミングで暮らしをハック

Web制作の備忘録。

「画像の上に表示させる文字を目立たせる方法」

目立つ文字を表示する方法

CSSで「text-shadow」を指定する。

こんな風に変わりました。

【ビフォー】

【アフター】

ボヤケていた文字が、はっきり見えるように。

コピペで使えます。

color: white;
text-shadow: 2px 2px 5px black,
-2px 2px 5px black,
2px -2px 5px black,
-2px -2px 5px black;

参考までに。

text-shadow:(右距離) (下距離) (ぼかし具合) (影の色);

・4方向に指定して、輪郭を作る。

・一行ごとに、半角カンマで区切る！

（右距離）にマイナス＝左方向への影に

（下距離）にマイナス＝上方向への影に

・文字に輪郭をつけると、画像に埋もれず目立つ。

・CSSのtext-shadowで4方向に指定。