CSSでネオン風の文字を作ってみる

2022-04-02

前書いたこれをせっかく作ったし……ということで、これをこのままCSSのデザインに落とし込んでみました。

javascriptを使わずに純粋にCSSだけで作成したので埋め込みやすいと思います。

Excelでネオン風に文字をデザインする
Excelでネオン風に文字をデザインする
mikan-tech.info

動作確認環境

PC

  • Google Chrome(99.0.4844.84)
  • Microsoft Edge(100.0.1185.29)
  • Firefox(99.0)
  • Internet Explorer(21H2 19044.1586)
    • 形は崩れるが読めることを確認済み

iPhone

  • Google Chrome
  • Safari

iPhoneでの描画が若干崩れるので対応方法検討中

黒抜きネオン風文字

See the Pen neon1 by ewen (@mikantech) on CodePen.

埋め込んでみるとこんな感じ

ネオン風文字1

白抜きネオン風文字

See the Pen neon by ewen (@mikantech) on CodePen.

白抜き文字の方はこんな感じになります。

ネオン風文字2