【初心者でもわかる】CSSで立体文字を再現する方法

どうも7noteです。CSSで3Dの文字を再現するには。

基本的にwebサイトは平面ですが、立体感のある表現をしたい時にちょっと無理やりですが文字を立体にさせることができます。

見本

立体文字の書き方

index.html

<div class="text">777</div>

style.css

.text {
  font-size: 30px;    /* 文字サイズを30pxにする */
  font-weight: bold;  /* 太文字にする */
  text-shadow: 1px 1px 0 #666,2px 2px 0 #666,3px 3px 0 #666;  /* 影を3重に指定 */
}

正確には立体ではなく、あくまでも立体に見せかけているだけですが、パッと見はそれほど気にならないと思います。
影を3重にして、左上に伸びているような立体感を再現しています。

背景色を使うとこんなかんじの立体感も再現することができます。

style.css

.text {
  color: #99f;
  font-size: 30px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff,2px 2px 0 #fff,-1px -1px 0 #fff;
  background: #99f;
  padding: 5px;
}

まとめ

グラデーションをつけたり、さらに立体化を求めるなら画像にするしか今は方法がないかもしれませんね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ