凹んで見える文字

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

CSSの解説

<p class="hollow-text">HOLLOW TEXT</p>

/*** 文字をへこませる ***/
.hollow-text{
  font-weight: bold; /*太字*/
  color: transparent; /*文字を透明に*/
  background: rgb(120 120 120); /*背景色*/
  background-clip: text; /*背景を文字の形に切り抜く*/
  -webkit-background-clip: text; /*ベンダーフレックス*/
  text-shadow: 0.04em 0.04em 0.06em rgb(255 255 255 /55%); /*半透明の白い影を付ける*/
}

文字を凹ませるには内側に影を付けるのが一般的ですが、文字に影を付けるtext-shadowはinsetが使えません。そのため、文字を透明にしてオフセットで内側に影を付けます。

今回は暗い影を付けずに内側に明るい影を付けて、相対的に文字の端を暗くします。

• color: transparentで文字色を透明にする
• background-colorで好きな色を指定（この色が文字色になる）
• background-clipで背景を文字の形に切り抜く（Chrome対応のため-webkitも必須）
• text-shadowで文字の内側に半透明の白い影を付け、ふちの部分に暗い影があるように見せる
  • オフセット(off-set)はxy共に0.04em程度
  • ぼかし(blur-radius)は0.5~0.6em程度
  • 色(color)はrgba(255,255,255,0.5)の半透明の白い影

※オフセット：左上を起点(0,0)としたずらし具合の数値

background-clip を使わない凹み文字

background-clip: textが完全対応していないブラウザのためのCSSです。

基本的には背景と文字の色が同系色の時に使うCSSです。はみ出した影を背景に同化させるという仕組み上、文字の色が背景に引っ張られるので注意してください。

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

• colorで文字を半透明の色にする
• text-shadowで2つの影を付ける
  • 半透明の黒い影で文字全体を覆う
  • 軽くぼかしを入れた背景色の影を少し右下に（はみ出るため背景色と合わせる）

おすすめの使い方

• 見出しデザイン
• タイトル
• トップページのメインビジュアルやファーストビュー