【初心者でもわかる】立体に見える錯覚文字の作り方3選

どうも7noteです。文字がまるで立体に見せて錯覚を起こす方法を3つご紹介

影を駆使して、文字を立体に見せかけるマジック。
見出しとかにも使えるかも。

3つの方法をご紹介しますので自由にお使いください。

①text-shadowで立体感を出す

index.html

<h2 class="font">FONT</h2>

style.css

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

②地面に影を作り、文字を直立させる

index.html

<h2 class="news">NEWS</h2>

style.css

.news {
  font-size: 3em;      /* 程よい大きさに指定 */
  position: relative;  /* 基準位置とする */
  text-align: center;  /* 文字を中央揃えにする */
}

.news::before {
  content: "NEWS";    /* 影にするテキストを指定 */
  font-size: 0.8em;   /* 少し小さくするor大きくする */
  letter-spacing: 8px;/* 文字間を広げる（微調整必要） */
  color: #ccc;        /* 文字色を薄いグレーに指定 */
  opacity: .7;        /* 透明度を0.7に指定 */
  position: absolute; /* 相対位置にする */
  bottom: 3px;        /* 下から3pxの位置に指定（微調整必要） */
  left: 50%;          /* 左から50%の位置に指定 */
  transform: translateX(-40%) skew(-45deg);  /* 表示位置と傾斜を指定（微調整必要） */
  z-index: -1;        /* 背面に移動 */
}

文字を直立させる方法です。
地面に影を作ることで、普通の文字が直立しているように見え、立体的にみえます。

③　①と②を組み合わせてみる

index.html

<h2 class="news">NEWS</h2>

style.css

.news {
  font-size: 3em;      /* 程よい大きさに指定 */
  position: relative;  /* 基準位置とする */
  text-align: center;  /* 文字を中央揃えにする */
  font-weight: bold;   /* 太文字にする */
  text-shadow: 1px -1px 0 #666,2px -2px 0 #666,3px -3px 0 #666;  /* 影を3重に指定 */
}

.news::before {
  content: "NEWS";    /* 影にするテキストを指定 */
  font-size: 0.8em;   /* 少し小さくするor大きくする */
  letter-spacing: 8px;/* 文字間を広げる（微調整必要） */
  text-shadow: none;  /* 影には影をつけない */
  color: #ccc;        /* 文字色を薄いグレーに指定 */
  opacity: .7;        /* 透明度を0.7に指定 */
  position: absolute; /* 相対位置にする */
  bottom: 3px;        /* 下から3pxの位置に指定（微調整必要） */
  left: 50%;          /* 左から50%の位置に指定 */
  transform: translateX(-40%) skew(-45deg);  /* 表示位置と傾斜を指定（微調整必要） */
  z-index: -1;        /* 背面に移動 */
}

まとめ

自分でも思っていたよりキレイにできたのでちょっとビックリ。
他の方法ももし思いつけば追加していきます。

おそまつ！

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