CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます

サイト構築 -CSS

Post on:2023年9月11日

sponsors

イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。

テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる実装テクニックを紹介します。

まずは、デモで実際のシャドウをご覧ください。
上部に2pxのハイライトを設定しています。

See the Pen
highlight compliment to a text-shadow effect by coliss (@coliss)
on CodePen.

シャドウとハイライトのCSSは、下記の通りです。
カラーがoklch()で設定されていますが、hex値でも大丈夫です。ポイントは通常のシャドウと一緒にハイライト用のtext-shadowを上部に設定することです。

  .highlighted-text-shadow {
  :root {
    --shadow: oklch(25% .2 var(--hue));
    --highlight: oklch(98% .05 var(--hue));
  }

    text-shadow:
      /* 通常のtext-shadow */
      0 .15ch 15px var(--shadow),
      /* ハイライト用のtext-shadow */
      0 -2px 0 var(--highlight);
  }

.highlighted-text-shadow {

:root {

--shadow: oklch(25% .2 var(--hue));

--highlight: oklch(98% .05 var(--hue));

}

text-shadow:

/* 通常のtext-shadow */

0 .15ch 15px var(--shadow),

/* ハイライト用のtext-shadow */

0 -2px 0 var(--highlight);

}

参考までに、上部のハイライトがないバージョンもご覧ください。
たった2pxですが、あるとないとでは全然異なります。

See the Pen
highlight compliment to a text-shadow effect by coliss (@coliss)
on CodePen.

元ネタは下記ポストより。

subtle #CSS text-shadow tip:

a 1-2px complimentary *highlight* shadow emulates a light source; makes the effect more realistic

see it for yourself in this Codepenhttps://t.co/cI9IntsD1Z pic.twitter.com/mecua2jLpj

— Adam Argyle (@argyleink) September 6, 2023