text-shadowとはそもそもどんなものなのか？どう使うことができるのか？ text-shadowの実践的な使い方が曖昧な方も多いのではないでしょうか。
この記事では、cssのtext-shadowプロパティについて解説いたします。
text-shadowを扱えるようになると、影だけでなく、縁取りもできるようになり、手軽におしゃれな文字デザインを実現させることができるようになります。
- CSSで文字に影をつける方法
- text-shadowの基本構文
- text-shadowの応用
目次
text-shadowとは
text-shadowとは、HTMLで記述されたWebフォントとは、テキスト要素に対して、影をつけることができるCSSプロパティです。
テキストからのXおよびY軸のオフセット値、影の色を指定して影を配置します。
text-shadowとbox-shadowの違い
text-shadowと似たものに、box-shadowが存在します。どちらも要素に対して影をつけることができるプロパティですが、影が適用される要素の種類が異なります。
box-shadow
要素の周囲の輪郭に沿って影をつけるCSSプロパティです。文字には適用されません。
text-shadow
名前の通り、文字に対して影が適用されるCSSプロパティです。
text-shadowの使い方
影をつけたい文字のタグに対して、以下のように指定します。
p {
text-shadow: 3px 3px 2px #f4f4f4;
}
色や距離など、複数の設定を一度に設定できます。どのような値がどのような順番で指定されるか、以下で詳しくみていきます。
text-shadowの基本構文
基本の書き方について説明します。
See the Pen tex-shadow basic by ZeroPlus (@zeroplus-programming) on CodePen.
それぞれの値は基本的にこのような順番で指定されています。
text-shadow: offset-x offset-y blur-radius color;
一つ一つの値は次のような設定を表しています。
offset-x
x軸（横）方向の影の距離。プラスの値は右側、マイナスの値は左側になります。
offset-yy軸（縦）方向の影の距離。プラスの値は下側、マイナスの値は上側になります。
blur-radiusぼかしの値。数値が大きくなるほどぼかしも大きくなり、小さいほど輪郭がはっきりします。
color影の色。例のようにカラーネームだけでなく、16進数（#000000）やRGBでも指定することができます。
以下のように、色は一番最初に指定することもできます。
.text {
text-shadow: orange 3px 3px 3px;
}また、blur-radiusと色は指定を省略することもできます。
.text {
text-shadow: 3px 3px;
}この場合、ぼかしは発生せず、色は影をつけたい文字の色と同じになります。
サンプルの紹介
text-shadowを使ってさまざまなスタイルを作成するサンプルを紹介します。
ぼやけて光るテキスト
offset-x, offset-yの数値を0に設定すると、指定している文字の真後ろから影がついたような見せ方ができます。
See the Pen text-shadow glow by ZeroPlus (@zeroplus-programming) on CodePen.
これを応用し、後に紹介する複数影をつけるというやり方と一緒に使うと、ネオンのような表現ができるようになります。
こちらのサイトでは、そのようなサンプルの例が豊富に紹介されています。
縁取りテキスト
ぼかしを0にして、上下左右・斜め方向に影を指定すると、文字の縁取りをすることができます。
このように影というと立体的な印象を受けますが、フラットなデザインを作成することも可能です。
See the Pen text-shadow surrounded by ZeroPlus (@zeroplus-programming) on CodePen.
複数の影
縁取りテキストで指定していたように、text-shadowはカンマで区切ることによって複数の影を一つのテキストに指定することができます。
複数指定をうまく使うことで、文字にさまざまな工夫ができるようになります。
See the Pen text-shadow double by ZeroPlus (@zeroplus-programming) on CodePen.
まとめ
text-shadowについて、理解を深められましたか？
このように影を工夫して使用することで、多様な表現ができますが、まずは
- text-shadowを使用すれば文字に影をつけられること
- text-shadowプロパティの値がそれぞれ何を意味しているか
をしっかり押さえておきましょう！
text-shadowで、どのような設定をしたら、どのような見え方をするのかというのを直感的に操作しながら確認できる、「text-shadowジェネレーター」というのもございます。
挙動を見るだけでなく、使いたいと思った時にはそのままコードも取得することができますので、ぜひ試してみてください。
基本を抑えつつ、さまざまなテキストや見出しに使用してデザインに生かしてみてください！
