裏紙に書く程度の内容

CSSで文字を立体的にする

cssでテキストを立体的に表示します。

text-shadowを使います。でもフツーに使うと影がつくだけなので立体的というよりちょっと浮いて見えるだけです。
Sample Text

text-shadow: 3px 5px 0px #555;

ぼかしを入れると

Sample Text

text-shadow: 0px 5px 3px #555;

いい感じですが、おもてたんとなんかちがうー!!

もうちょっと頑張って、、

Sample Text

text-shadow:
  0px 1px 0px #0092b3,
  0px 2px 0px #0087a6,
  0px 3px 0px #008099,
  0px 4px 0px #00758c,
  0px 5px 0px #555,
  0px 6px 0px #006a80,
  0px 0px 0px #006073;

よくなってきました。さらに影っぽいものを追加すれば・・・

Sample Text

text-shadow:
  0px 1px 0px #0092b3,
  0px 2px 0px #0087a6,
  0px 3px 0px #008099,
  0px 4px 0px #00758c,
  0px 5px 0px #555,
  0px 6px 0px #006a80,
  0px 0px 0px #006073,
  0px 8px 7px #005566;

いい感じではないでしょうか。

構成としてはtext-shadowを下方向にのみ複数重ねてだんだん色を濃くしていきます。最後にぼかしを加えて影っぽいものを追加すれば完成です。

※最後のスタイル全体は下記参照。

Sample Text
URABLO
広告
Index
広告