テキストシャドウを入れて見た目UP
背景と同色のテキストは視認性が悪いですよね？
視認性が悪いって・・・見た目が悪い・伝わりにくいということです。
そういう時に便利な「テキストシャドウ」プロパティです。
テキストに影を付けることで、同色であっても目立たせることができます。
それでは、やってみましょう！！
テキストシャドウの書き方
テキストシャドウ（text-shadow）の内訳は以下です。
text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;いたってシンプルです。
先ずは、３つの距離を指定します。
①水平方向
②垂直方向
③影のぼかし半径
最後にカラーコードもしくはカラーネームを入れます
実際にテキストシャドウを書いてみましょう！！
次のコードを書きます
p {text-shadow: 1px 2px 3px #808080; }以下のように仕上がります。
See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.
簡単ですね～
これが基本構造ですが、数値をマイナスであったりと変更すると面白いですよ。
影を複数指定した場合
複数使用したい場合は「カンマ」をつけて、前述と同じように書きます。
See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.
まとめ
このようにテキストシャドウはテキストをハッキリさせることができます。
他の使い方として、ホバーしたらテキストシャドウが現れるなど応用できます。
では、楽しんでコーデイングしてみてください。
結構、遊び心って大事ですよ。
最後に、実をいうと「テキストシャドウジェネレーター」という便利なツールがあるので、どうても面倒臭いって方は使ってください！！