CSSでテキストに影をつける方法

影のある文字をコーディングをする時、ひと昔前なら画像データを切り抜いて作成していましたが、現在では、text-shadowプロパティを使うことによって表現できるようになりました。
CSSプロパティ、テキストシャドウについてまとめてみました。

text-shadowにつてい

text-shadowはテキストに影を付けるプロパティです。
影の位置設定はpx,em等の単位が使え、
横方向は、プラスだと右に、マイナスだと左に移動
縦方向は、プラスだと下に、マイナスだと上に移動
cssの設定は、左から「水平方向の距離」「垂直方向の距離」「影のぼかし半径」「影の色」となります。

css

.shadow_sample{
    text-shadow:2px 2px 3px #57BFE1;
}

設定数値がマイナスの場合
css

.shadow_sample2{
    text-shadow:-2px -2px 3px #57BFE1;
}

ジェネレーター

手作業でcssで細かく調整しなくても、text-shadowジェネレーターを使うことで、設定した数値がプレビューとして表示されるので、感覚的にtext-shadowを付けつることが出来ます。
設定した数値は、cssとして吐き出されるので、そのままコードをコピーして使うことができます。

■text-shadowジェネレーター
■css-generator.net

まとめ

ちょとしたデザインに役立つtext-shadow、背景画像の上に文字を表示する時など少し文字が読みにくい場合などに役立つかもしれません。
今まで画像でしか表現できなかったことがcssで表現できるようになり、ホームページでの表現方法に幅が広がるようになりました。
一度ためしてみてはいかがでしょうか。

TREVOWP