前書いたこれをせっかく作ったし……ということで、これをこのまま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.
埋め込んでみるとこんな感じ
ネオン風文字1
白抜きネオン風文字
See the Pen neon by ewen (@mikantech) on CodePen.
白抜き文字の方はこんな感じになります。