CSS3テキストシャドウを思ったとおりに設定するコツ

暑かった夏もようやく終わりが見えてきました。

夏が終わるころに私の大好きなある果物の旬がやってきます。夏の終わりで分かったあなたは天才。

そう、それは無花果。好きな食べ物ベスト3に入るのではというくらいに大好きなのです。

でもドライ無花果はそんなに好きじゃない。同じ無花果なのに。

さてさて、今回はCSSプロパティ、テキストシャドウについて。

どうも思ったようにいかないとお悩みの方にお届けします。

まずはテキストシャドウの基本をおさえておきましょう。

テキストシャドウはテキストに影を付けるプロパティです。距離の設定単位はpx,em等が使えます。

4つの設定要素をひとまとめにしてカンマで区切り、複数設定することも可能です。

重なる順序は指定した順に上から下へ並びます。最初に指定したものが一番上になります。

p {text-shadow: 2px 2px 10px #fff;}
p {text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;}

テキストシャドウを設定する際、最近は一方向だけに設定する事はあまり無いかと思います。
私はテキスト全体に付けることがほとんどですし、そういう方が多いのではないでしょうか。
テキスト全体に付ける場合は水平方向、垂直方向ともに0に設定します。

p {text-shadow: 0 0 6px #fff;}

これでうまくいくはず、と思ってみてみると、なんだか思ってるのと違う。
影が薄い。カラーによっては影がほとんど見えない。
数字を大きくしてみてもあまり変わらない。
困った。どうしよう。

まず一つ目の解決方法。
正と負の値が設定できるので、それぞれを同時に設定すると全体に影が付くという事になります。

p {text-shadow: 2px 2px 10px #ff0000, -2px -2px 10px #ff0000;}

次にもう一つの解決方法。
正と負ではなく、全方向への設定を重ねます。
重ねることで奥行きや厚みが出て思ったように設定する事ができます。
方向違いを設定するよりこちらの方がキレイに設定できるような気がします。
※感じ方には個人差があります

p {text-shadow: 0 0 2px #fff, 0 0 6px #fff;}

私の経験談として、まず始めにあまりぼかしの無い影を設定、徐々にぼかしの幅を広げていくようにするとキレイに設定できる気がします。
※感じ方には個人差があります

MDNのサイトにより詳細な情報がありますので参考にされてください。
https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow

いかがでしたか。重ねることで可能性が無限に広がるテキストシャドウ。
さりげないあしらいですがこういう細かい部分がデザインのクオリティアップに役立つかもしれません。
ぜひ一度お試しください。