【css】text-shadowを使ったテキストの装飾
cssのtext-shadowを使って、シャドウを付けるだけでなく、エンボスや縁取りなどの表現をすることも出来ます。
text-shadowの基本的な記述の仕方は、
text-shadow: 水平方向の距離, 垂直方向の距離, 影のぼかし半径, 影の色
となります。
水平方向の距離・垂直方向の距離・影のぼかし半径は、pxやemやexなどの単位で指定出来ます。
影のぼかし半径や影の色は省略も可能です。
今回は、cssのtext-shadowを使った文字装飾を5つご紹介いたします。
1. シャープな影を付ける
完成形デモ
See the Pen css text-shadow(sharp) by crnote (@crnote) on CodePen.
cssの書き方
シャープな影を付ける場合は、水平方向の距離・垂直方向の距離・影のぼかしの背景に同じ1pxを指定します。
2. 立体的
完成形デモ
See the Pen css text-shadow(立体的) by crnote (@crnote) on CodePen.
cssの書き方
水平方向・垂直方向1pxにぼかし0の#fffの影を設定します。さらに1pxずらして、水平方向・垂直方向2pxにぼかし0の影を設定します。
2段階で影を設定することで立体感を表現します。
3. 凹み
完成形デモ
See the Pen css text-shadow(凹み) by crnote (@crnote) on CodePen.
cssの書き方
文字色は「transparent(透明)」を設定します。
背景色に黒を設定し、「-webkit-background-clip:text;」を設定することで、背景色の黒を前景のテキストに表示します。
最後に「text-shadow」でテキストの内側に影を設定して、凹みを表現します。
4. エンボス
完成形デモ
See the Pen css text-shadow(emboss) by crnote (@crnote) on CodePen.
cssの書き方
水平方向・垂直方向-1pxに白の影、水平方向・垂直方向1pxに黒の影を設定することで、エンボスを表現します。
5. 縁取り
完成形デモ
See the Pen css text-shadow(縁取り) by crnote (@crnote) on CodePen.
text-shadowの書き方
上下左右1pxずつずらして、ぼかし0の影を設定することで、テキスト周りの縁取り線を表現します。
まとめ
以上、text-shadowを使った文字装飾を5つご紹介いたしました。
使い方によって様々な文字装飾が出来るので、使い方を覚えておくと便利ですね!