text-shadowを使ったかわいい、いい感じの簡単なタイポグラフィ『Close shade example』

Close shade example
By Tim Brown

DEMO 表示

SALEという文字に、影を複数指定して作られたものです
文字の色、影のサイズ感もちょうどいい感じ。

デザインの参考になりそうです。

文字はレスポンシブで、影もレスポンシブ
サイズにemを使うことでレスポンシブになっています

text-shadowの値はカンマで区切ることで複数設定する事が可能です

text-shadowsが当てられているCSSの部分

.close .title em {
  font-weight: 900;
  font-size: 3.1em;
  color: #e65600;
  text-shadow: 0 0.005em #e9cac7, -0.005em 0 #c9d5db, -0.005em 0.01em #e9cac7, -0.01em 0.005em #c9d5db, -0.01em 0.015em #e9cac7, -0.015em 0.01em #c9d5db, -0.015em 0.02em #e9cac7, -0.02em 0.015em #c9d5db, -0.02em 0.025em #e9cac7, -0.025em 0.02em #c9d5db, -0.025em 0.03em #e9cac7, -0.03em 0.025em #c9d5db, -0.03em 0.035em #e9cac7, -0.035em 0.03em #c9d5db, -0.035em 0.04em #e9cac7, -0.04em 0.035em #c9d5db, -0.04em 0.045em #e9cac7, -0.045em 0.04em #c9d5db, -0.045em 0.05em #e9cac7, -0.05em 0.045em #c9d5db;
}

コードをダウンロード

DOWNLOAD