CSSのtext-shadowを使って文字に影をつける方法と応用

text-shadowの使い方

text-shadowプロパティを使うことで文字に影をつけることができます。

パラメーターを調整することで様々なデザインを表現することができます。

text-shadowの記述方法

text-shadow: 要素からX方向のオフセット Y方向のオフセット ぼかしサイズ 影の色;
text-shadow: 1px 1px 2px #ffffff;

適用結果

テキストシャドウ

パラメーター詳細

text-shadowのパラメーターの「要素からX方向のオフセット」<offset-x>と「Y方向のオフセット」<offset-y>は設定必須になります。

<offset-x>では正の値を設定するとテキストの右に影が配置され、負の値を設定するとテキストの左に影が配置されます。

<offset-y>では正の値を設定するとテキストの下に影が配置され、負の値を設定するとテキストの上に影が配置されます。

<offset-x>、<offset-y>ともに「0」に設定すると真後ろに配置され、ぼかしを0より大きい値に設定することで文字の全周に影が見えるようになります。

「ぼかし」<blur-radius>は省略可能で、省略すると「0」が設定されます。値が大きいほどぼかしが大きくなり、影は薄く広がります。

パラメーターを調整して様々なデザインを表現していきます。

デザイン例

基本

右に2px、下に2px、ぼかし4pxの影をつけた場合

テキストシャドウ

<p style="text-shadow: 2px 2px 4px #f78deb;">
テキストシャドウ
</p>

光彩を表現

光彩は上下左右のオフセット値を「0」に設定し、ぼかしの大きさ、色を調整して表すことができます。

上下左右0px、ぼかし8pxの影をつけた場合

テキストシャドウ

<p style="text-shadow: 0 0 8px #f78deb;">
テキストシャドウ
</p>

縁取り（アウトライン）

縁取りを実装するには、text-shadowを連結して設定していきます。

text-shadowはカンマ区切り「,」で、複数設定することが可能です。

縁が1pxの場合

縁が1pxの場合、ぼかしを「0」にしてtext-shadowを上下左右斜めの8方向設定します。

テキストシャドウ１

p {
text-shadow: 1px 1px 0 #f78deb,
            -1px 1px 0 #f78deb,
            1px -1px #f78deb,
            -1px -1px #f78deb,
            0 1px 0 #f78deb,
            0 -1px 0 #f78deb,
            -1px 0 0 #f78deb,
            1px 0 0 #f78deb;
}

縁が2px以上の場合

縁が2px以上の場合、ぼかしを「0」にしてtext-shadowを上下左右斜めの8方向設定する方法と上下左右を0pxにし、ぼかしを複数重ねて縁取りを実装する方法があります。

テキストシャドウ２ー１

ぼかし0の方法例

p {
text-shadow: 2px 2px 0 #f78deb,
            -2px 2px 0 #f78deb,
            2px -2px #f78deb,
            -2px -2px #f78deb,
            0 2px 0 #f78deb,
            0 -2px 0 #f78deb,
            -2px 0 0 #f78deb,
            2px 0 0 #f78deb;
}

テキストシャドウ２ー２

ぼかし重ねの方法例

p {
text-shadow: 0 0 2px #f78deb,
             0 0 2px #f78deb,
             0 0 2px #f78deb,
             0 0 2px #f78deb,
             0 0 2px #f78deb,
             0 0 2px #f78deb,
             0 0 2px #f78deb,
             0 0 2px #f78deb;
}

2色使ったshadow

2色の影を使用して以下のように表現することができます。

テキストシャドウ2色

p {
text-shadow: 5px 5px 8px #eb2135,
            -5px -5px 8px #2197eb;
}

スモークアニメーション

text-shadowとアニメーションを組み合わせることでスモークアニメーションを実装することもできます。

SMOKE

<p class="smoke">
  <span>S</span><span>M</span><span>O</span><span>K</span><span>E</span>
</p>

<style>
.smoke {
  color: rgba(255, 255, 255, 0);
  font-size: 30px;
  text-align: center;
  text-shadow: 0 0 180px rgba(255, 255, 255, 0), 0 0 160px #bd1547;
}

.smoke span {
  display: inline-block;
  font-size: 30px;
  animation: smoke 2.5s ease infinite alternate;
  animation-delay: 2.5s;
}

.smoke span:nth-of-type(1) {
  animation-delay: 0s;
}

.smoke span:nth-of-type(2) {
  animation-delay: 0.1s;
}

.smoke span:nth-of-type(3) {
  animation-delay: 0.2s;
}

.smoke span:nth-of-type(4) {
  animation-delay: 0.3s;
}

.smoke span:nth-of-type(5) {
  animation-delay: 0.4s;
}

@keyframes smoke {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 0 rgb(255, 255, 255);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 rgb(255, 255, 255);
  }
}
</style>

まとめ

CSStのtext-shadowを使って文字に影をつける方法と応用した使い方をご紹介しました。

text-shadowを複数設定したり、ぼかし具合を調整したりすることで様々な影を表現できるので試してみてください。