【 CSS 】ネオン風にモチーフにしたエフェクト <4種>

CSS

 こんにちは! 今日は、ネオンサイン風にモチーフしたエフェクトを紹介します。😀
 昔から魅力的な演出をするネオンサイン。
 今回はおしゃれにWebデザインにも取り入れても綺麗に演出するものを紹介します。

一文字ごとに点滅させる

 時間差で一文字づつ点滅させているもの。

See the Pen poyrzxv by bens-user (@ben1099user) on CodePen.

オーソドックスに文字全体をチらつかせたもの

 デザインに取り入れる方法は様々にあると思います。
 おしゃれな感じにしたり、癒される雰囲気にしたりと、ムードに合わせてWebデザインに取り入れて下さいね。

See the Pen QWNvodG by bens-user (@ben1099user) on CodePen.

バックに背景を貼り付けてネオン管らしく文字を引きただせる

 ネオン管は1912年にフランスで開発されたと言われています。
 街中では目にすることも多いのではないでしょうか。
 それらしくさせるには、バックにカフェ、バーなどの背景も添えてみると、それらしい雰囲気になりますね。

See the Pen MWymxpE by bens-user (@ben1099user) on CodePen.

ところどころ点滅させると、蛍光管らしくリアルな表現になります

 背景を暗くさせたWebサイトの作成には、レトロ感のあるネオンサインが効果的に目を引くこと
 間違いなしですね。 軽量なので、ぜひお試しください。
 

See the Pen poyPYxp by bens-user (@ben1099user) on CodePen.

コメント