CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめ

テキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するCSSのテクニックを紹介します。

ネオンライトはCSSのtext-shadowbox-shadowで実装されており、CSSアニメーションやJavaScriptで動きを加えるとさらに面白くなります。

CSSでテキストやボタン、ボーダーに美しいネオンライトのエフェクトを実装するテクニックのまとめ

各デモは「Run Pen」をクリックすると、動作します。
まずは、ネオンサインでチカチカの効果もあります。

See the Pen
Flickering Neon Sign Effect using CSS Text & Box Shadow
by George W. Park (@GeorgePark)
on CodePen.

上記のデモは、テキスト編集もそのままできます。「OPEN」を「オープン」などに変更してみてください。

続いて、さまざまなネオンライトのエフェクト。

See the Pen
Neon text-shadow effect
by Erik Jung (@erikjung)
on CodePen.

こちらもさまざまなネオンライト。アメリカっぽいですね。

See the Pen
Neon Signs
by Thomas Trinca (@Trinca)
on CodePen.

ボーダーに適用すると、蛍光灯で囲まれた感じになります。

See the Pen
Noble Gasses / Flourescent Lights [cpc-gas]
by Ryan Johnson (@CITguy)
on CodePen.

ボタンのボーダーにはアニメーションで適用し、ホバーすると背景が輝き、反射効果もあります。

See the Pen
Glowing buttons
by Pranjal Bhadu (@bhadupranjal)
on CodePen.

一見、シンプルなネオンライトですが、アニメーションで輝きが動きます。

See the Pen
Simple CSS Neon Text Animation
by Red Stapler (@redstapler)
on CodePen.

カラーが変化するネオンライトもきれいですね。

See the Pen
Text Effect - Mystique
by Chris Johnson (@jhnsnc)
on CodePen.

背景を加えると、ネオンライトはさらに面白くなります。文字がチカチカするのもリアルです。

See the Pen
CSS animated Neon Sign
by Nodws (@nodws)
on CodePen.

シンプルなアニメーションでも、ネオンライトは輝きます。

See the Pen
CSS Neon Sign
by Ananya Neogi (@ananyaneogi)
on CodePen.

この404、かっこいいですね。

See the Pen
Neon Text with Flickering - All Flicker!
by Geoff Graham (@geoffgraham)
on CodePen.

上記のアニメーションを変えたバージョン。雰囲気がでてます。

See the Pen
Neon Text with Pulsating Effect
by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

輝きをぼんやり変化させるのもかっこいいです。

See the Pen
Neon Text Subtle Flickering
by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

背景にライトをあてるのもいいですね。

See the Pen
Neon Text with Background Image
by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

ボーダーにもネオンライトを適用したバージョン。

See the Pen
Neon Sign with Border
by Silvia O'Dwyer (@silvia-odwyer)
on CodePen.

ここからは、JavaScriptで動きを加えたデモです。

See the Pen
NEON LOVE
by al-ro (@al-ro)
on CodePen.

マウスの動きに合わせて、六角形のネオンライトが変化します。

See the Pen
neon hex
by Ana Tudor (@thebabydino)
on CodePen.

こちらも同じ六角形で、ずっと見てしまいます。

See the Pen
neon hexagon-forming particles
by Matei Copot (@towc)
on CodePen.

雨をネオンにした、ネオンレイン。

See the Pen
Neon Rain
by Nate Wiley (@natewiley)
on CodePen.

最後は煙をネオンにした、ネオンスモーク。

See the Pen
Neon Smoke
by Luke Wood (@lukehmwood)
on CodePen.

sponsors

top of page

©2021 coliss