CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます
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を上部に設定することです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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-shadowtip: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
sponsors
