様々な影付きの文字

まずは基本的な影の付け方から解説します。

See the Pen 基本的な影付き文字 by チータツ (@cheese_fuji) on CodePen.

CSSの解説

<p class="shadow">TEXT SHADOW</p>

/***影を付ける***/
p.shadow{
  text-shadow: 0.1em 0.1em 0.1em #000;
/*offset-x offset-y blur-radius color*/
}

文字に影を落とすにはtext-shadowを使用します。影の起点が文字になっているだけで、使い方はbox-shadowと同じです。

tex-shadowで指定する値は以下の4つ。

• off-set-x：横方向のオフセット（向き）
• off-set-y：縦方向のオフセット（向き）
• blur-radius：影のぼかし具合
• color：影の色

オフセットなどをpx単位で指定すると文字サイズの変更時に崩れてしまうため、フォントサイズを基準としたem単位で指定するのがおすすめです。

text-shadowプロパティの詳細

応用CSS

シャープな影

オフセットとぼかしを小さくすることで、自然でシャープな影になります。また、color値をrgbaで指定して透明度を下げれば、強調し過ぎない自然な影になります。

See the Pen シャープな影付き文字 by チータツ (@cheese_fuji) on CodePen.

やわらかい影

blur-radius値を高めてぼかしを強くすれば、ふんわりやわらかい影になります。

オフセットはxy共に0にしておくのがポイントです。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

凹凸を感じさせる影文字

背景から文字が浮き出ているような影の付け方。

少しだけy方向のオフセットとぼかしを入れて、影は薄めでテキストを背景より少しだけ明るい色にします。

See the Pen 凹凸感のある影文字 by チータツ (@cheese_fuji) on CodePen.

おすすめの使い方

• トップページなどのヘッダー部分
• ファーストビュー

マウスホバーなどをトリガーにして影を変更することで、飛び出したり沈んだりするような遠近感のある文字を作ることも可能です。

マウスホバーで浮き沈みするテキスト