CSSのtext-shadowで作られた立体感がある影をコピペで作れるコード

Shadow Play

DEMO 表示

影のところが美しく作られている文字です、リッチな感じがします。日本語でも綺麗に表示できます

text-shadowで複数の影を指定することで、複雑な立体感の有る影を作り出しています

コードもとてもシンプルで、一部のCSSをコピーして使うだけで出来る

コード

CSS

.shadowPlay
{
  text-shadow: 0px 0px 3px rgba(235, 90, 90, 0.26),
    0px 3px 3px rgba(205, 60, 60, 0.25),
    2px 6px 3px rgba(205, 60, 60, 0.24),
    4px 9px 3px rgba(205, 60, 60, 0.23),
    6px 12px 3px rgba(205, 60, 60, 0.22),
    8px 15px 3px rgba(205, 60, 60, 0.21),
    10px 18px 3px rgba(205, 60, 60, 0.2),
    12px 21px 3px rgba(205, 60, 60, 0.19),
    14px 24px 3px rgba(205, 60, 60, 0.18),
    16px 27px 3px rgba(205, 60, 60, 0.17),
    18px 30px 3px rgba(205, 60, 60, 0.16),
    20px 33px 3px rgba(205, 60, 60, 0.15),
    22px 36px 3px rgba(205, 60, 60, 0.14),
    24px 39px 3px rgba(205, 60, 60, 0.13),
    26px 42px 3px rgba(205, 60, 60, 0.12),
    28px 45px 3px rgba(205, 60, 60, 0.11),
    30px 48px 3px rgba(205, 60, 60, 0.1),
    32px 51px 3px rgba(205, 60, 60, 0.09),
    34px 54px 3px rgba(205, 60, 60, 0.08),
    36px 57px 3px rgba(205, 60, 60, 0.06),
    38px 60px 3px rgba(205, 60, 60, 0.05),
    40px 63px 3px rgba(205, 60, 60, 0.04),
    42px 66px 3px rgba(205, 60, 60, 0.03),
    44px 69px 3px rgba(205, 60, 60, 0.02),
    46px 72px 3px rgba(205, 60, 60, 0.01);
}

必要な部分だけを取り出しました

CSSに追記して対象のHTMLのタグに shadowplay とclassを付けてやるだけで使えるてシンプルです

フォントサイズが小さいとうまく表現出来ないので

このコードを参考に、サイズ別のバージョンを作っておくのもいいかもしれないですね

数値にも法則性があるようなので、sassとかでうまいことフォントサイズに合わせて自動的に最適な影に出来るように作れるかも