【CSS入門】text-shadowで目指せ影マスター

この記事ではCSSのtext-shadowプロパティについて解説します。

text-shadowとは？

文字に影（ドロップシャドウ）をつけます。

CSS

text-shadow: 水平方向の距離 垂直方向の距離;

text-shadow詳細

基本的な書き方

影の基本の向きは右方向と下方向になるので、以下の場合、右に10px、下に10px伸びた影ができます。

HTML

<p class="text"></p>

CSS

.text{
  text-shadow: 10px 10px;
}

右ではなく左に影を伸ばしたいときと、下ではなく上に影を伸ばしたいときはマイナスの値を指定します。

CSS

.box{
  text-shadow: -10px -10px;
}

下の画像についてですが、影にぼかしを加えないと影が見にくいので、ぼかしを加えています(ぼかし方は後述)。

影の色を指定

デフォルトでは影の色は黒ですが、色を変更したい場合は、半角スペースをあけて色名やカラーコードで色を指定します。

CSS

text-shadow: 水平方向の距離 垂直方向の距離 影の色;

以下の場合、右と下に「カラーコード#00a3d3」の10pxの影ができます。

CSS

.text{
  text-shadow: 10px 10px #00a3d3;
}

色は透明色にもできるrgbaでの指定もできます。

CSS

.text{
  text-shadow: 10px 10px rgba(0, 163, 211, 0.3);
}

影をぼかす

影をぼかす場合は、垂直方向の距離のあとに、ぼかし距離(ぼかし度合い)をpxで指定します。

CSS

text-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離;

以下の場合、10pxの影に20pxのぼかしを加えています。

ぼかし距離のあとに色を指定すれば、色の変更をしながらぼかすことができます。

CSS

.text{
  text-shadow: 10px 10px 15px #00a3d3;
}

まとめ

マテリアルデザインの登場により要素にふんわりと影をつける機会が増えましたので、box-shadowとtext-shadowプロパティはしっかりと理解して使いこなせるようにしておきましょう。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。