どうも7noteです。今回は文字に対して影を入れる方法をやっていきます。

文字に影を入れるcssとして「text-shadow」というcssが用意されています。今回はこの「text-shadow」を導入してみましょう。

text-shadowの使い方

text-shadowには4種類の値が指定できます。

「横方向の位置」・「縦方向の位置」・「ぼかし具合」・「影の色」

実際にcssを書く時は以下のように記述します。

p {
    /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
    text-shadow: 1px 1px 2px black;
}

見た目↓

text-shadow解説

text-shadow: 1px 1px 2px black;

上の例であげた指定ですが、まず一番左の値の1pxから見ていきます。
この1pxはテキストに対して何ピクセル横に影を付けるかという意味です。
そして2つ目の1pxはテキストに対して何ピクセル縦に影を付けるかという意味になるので、
今回であれば右方向に1px、下方向に1pxの位置に影を付けるという意味になります。

そして、3つ目の2pxはぼかし具合の指定になるので、上下左右に2px分広がるように影を付けなさいという意味になります。

最後に影の色を指定して、最終的な意味としてはテキストからみて右に1px、下に1pxの位置から上下左右に2xp分広がるように黒色の影を付けなさい
という意味になります。

デザインでありそうなパターンのサンプルコード

見本ではフォントサイズはどれも24pxを指定してます。

①くっきりした影

p {
    /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
    text-shadow: 3px 6px 0px #CCC;
}

②背景にぼやかしをいれる

p {
    /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
    text-shadow: 0px 0px 5px #FCA134;
}

③背面にぼやけた影

p {
    /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
    text-shadow: 0 15px 5px rgba(0,0,0,.5);
}

さらにたくさんのサンプルがみたい方はこんなサイトを見付けたので参考にしてもいいかもしれません。15個くらいサンプルがあります。
https://www.nxworld.net/tips/text-shadow-styling.html

まとめ

テキストに影をつける方法はこれしかないので、上手に使いこなせるようになりましょう！
ただ影だけ角度を斜めにするとかはできないので、そのような場合は画像にするのが無難でしょう。

おそまつ！