テキストに影を付けようと思ったのですが、あれ?影が付かない・・・なぜだ?ちゃんと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冊ですべて学べる!