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

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

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

動作確認環境

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.

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

白抜きネオン風文字

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

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