挫折しないプログラミング習得方法
あつまれ 独学エンジニア
Web制作のノウハウ

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

Web制作の備忘録。

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

 

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

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

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

 

【ビフォー】

text-shadowを指定する前の画像

 

【アフター】

text-shadowを指定した画像

 

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

 

text-shadowの使い方

コピペで使えます。

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

 

参考までに。

text-shadowの値

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

 

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

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

 

マイナスの意味

(右距離)にマイナス=左方向への影に

(下距離)にマイナス=上方向への影に

 

 

今日の学び

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

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