【CSS】テキストに影をつける時はshadow-boxじゃなくtext-shadowを使おう

テキストに影を付けようと思ったのですが、あれ?影が付かない・・・なぜだ?ちゃんとshadow-boxをかけているのに。実はテキストに影を付けるにはshadow-boxではなくtext-shadowを設定する必要があります。

テキストに影を付けたかったのに付かない??

タイトルに使うテキストに影を付けようと思いました。
いつもdivなどに影を付ける様に「shadow-box」を設定したのですが、あれ?影がつかない・・・・。なぜ?

テキストに影を付けるデザインは今まで画像で行っていた為、テキストに影をつける時は「shadow-box」ではなく「text-shadow」だとは知りませんでした。。。

text-shadowの設定方法

こんな感じでテキストに影を付けてみましょう。

HTML

<p>TEXT SHADOW</p>

CSS

P{
  font-size: 7rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 10px 10px 20px #46acac;
}

重要なのは「text-shadow」の部分のみ。
他はサイズ、太さ、色の設定なので任意で設定してください。

text-shadowの詳細

text-shadowは以下のように数値設定されています。

text-shadow:  X軸(横) Y軸(縦)ブラー(ぼかし) 色;

例えば

text-shadow: 100px 100px 0 #46acac;

この様に設定すると

こうなります。

横、縦ともに100px離れ、ぼかしは0なので影はハッキリしています。
色の部分でrgbaも使えるので影に透過を掛ける事もできます。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!