HTML/CSS

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

    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方向に指定。