【css】text-shadowを使ったテキストの装飾

2020年06月29日

cssのtext-shadowを使って、シャドウを付けるだけでなく、エンボスや縁取りなどの表現をすることも出来ます。

text-shadowの基本的な記述の仕方は、

text-shadow: 水平方向の距離, 垂直方向の距離, 影のぼかし半径, 影の色

となります。

水平方向の距離・垂直方向の距離・影のぼかし半径は、pxやemやexなどの単位で指定出来ます。

影のぼかし半径や影の色は省略も可能です。

今回は、cssのtext-shadowを使った文字装飾を5つご紹介いたします。

シャープな影を付ける場合は、水平方向の距離・垂直方向の距離・影のぼかしの背景に同じ1pxを指定します。

水平方向・垂直方向1pxにぼかし0の#fffの影を設定します。さらに1pxずらして、水平方向・垂直方向2pxにぼかし0の影を設定します。
2段階で影を設定することで立体感を表現します。

文字色は「transparent（透明）」を設定します。
背景色に黒を設定し、「-webkit-background-clip:text;」を設定することで、背景色の黒を前景のテキストに表示します。
最後に「text-shadow」でテキストの内側に影を設定して、凹みを表現します。

水平方向・垂直方向-1pxに白の影、水平方向・垂直方向1pxに黒の影を設定することで、エンボスを表現します。

上下左右1pxずつずらして、ぼかし0の影を設定することで、テキスト周りの縁取り線を表現します。

以上、text-shadowを使った文字装飾を5つご紹介いたしました。
使い方によって様々な文字装飾が出来るので、使い方を覚えておくと便利ですね！