ミギムキ

[CSS] 文字が背景画像に重なっても見えるように影で縁取りたい

公開日:2018/09/15 更新日:2019/03/25

やりたいこと

背景画像の上に文字を乗せると、黒文字は暗い部分に、白文字は明るい部分に溶け込んでしまい、見にくくなってしまいます
そこで、文字の周りにうっすらと色をつけて縁取りすることで、背景画像の内容に関わらず、文字を読みやすく表示することができます
あれこれパラメーターを試した結果、筆者が独断と偏見でちょうどいいと感じたスタイルをご紹介します

サンプルコード

白文字を黒で縁取り

.white {
    color: #fff;
    text-shadow: -2px -2px 6px #000, 2px -2px 6px #000, 2px 2px 6px #000, -2px 2px 6px #000;
}

黒文字を白で縁取り

.black {
    color: #000;
    text-shadow: -2px -2px 6px #fff, 2px -2px 6px #fff, 2px 2px 6px #fff, -2px 2px 6px #fff;
}

仕組み、解説、補足など

text-shadowは、文字通りテキストに影をつけるスタイルです。カンマ区切りで複数パターンの影をつけることができます
「-2px -2px 6px #000」という一つのパターンは、影の「横の位置縦の位置ぼかしの度合影の色」を表しています
例えば「Apple」という文字に影をつける場合、#000色の「Apple」という文字の分身が、縦横-2pxずつずらした位置に6px分ぼかして表示される、というイメージです
この分身を、それぞれ左上(-2px -2px)、右上(2px -2px)、右下(2px 2px)、左下(-2px 2px)に置くことで、文字を縁取ることができます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。