【CSS】text-shadowを濃いめにいれる方法

はじめに

背景画像の上に文字を配置する際、視認性を高めるためにシャドウを濃く太く入れたいことがあります。text-shadowの値を試行錯誤しましたが、なかなか思うように調整できませんでした。ドキュメントを確認すると複数の影を設定できることを知りました……

やりたいこと

背景画像上に配置された文字に濃く太いシャドウを追加して、視認性を向上させます。

記述方法

HTML

<p class="text-shadow">
TEXTSHADOW
</p>

 

CSS

.text-shadow {
  font-size: 65px;
  text-shadow: 0 0 10px #333,
               0 0 10px #333,
               0 0 10px #333,
               0 0 10px #333,
               0 0 10px #333;
}

複数のtext-shadowをカンマ区切りで指定することで、影が重なり濃く見えます。

まとめ

今回の方法では、少し「力技」のような実装ですが、目的通りのデザインを実現できました。もっとスマートな方法をご存じの方がいれば、ぜひ教えてください！

参考サイト

こちらのサイトを参考にさせていただきました。

 

 

• WEB
• 技術情報