【CSS】CSSだけで実装できるハイセンスなテキストエフェクト【2019】

2019年6月10日

ウェブ業界の進歩ってすごく早いですよね。
CSSだけで実装できることも昔に比べて格段に増えてきました。
Jsに比べて容量も軽くなりますし、私は何となく安心感を感じます。笑

今回はCSSだけで実装できる、ハイセンスなテキストエフェクトをCodepenから探してきました。
早速紹介していきたいと思います。

Fade in & out animation

まるでSVGで吐き出したかのような動きです。最近はローディングでこんな感じのエフェクトを使用しているサイトもよく見かけますよね。
SVGだとテキストに修正が入ったりするとちょっと手間ですよね。そんな時にはこれを使ってみてはいかがでしょうか。
ちなみにIEだと動かないみたいです。そこだけは残念。

プラスチックみたいに滑らかな見た目のテキスト。
シンプルなサイトによく合いそうです。オシャレ度高め。

See the Pen Arcade Text CSS by Paul Noble (@paulnoble) on CodePen.0

8bitっぽくてすごくかわいいエフェクトです。私はChiptuneが好きなので、グッとくるエフェクト。Chiptune好きにはたまらないですね。

ポップな印象のエフェクト。何となくおいしそうに見えますね。

まるでロゴのようなテキストエフェクト。オシャレなお店の窓にプリントされていても違和感がないように思えるのは私だけでしょうか。
メインビジュアルなんかに使えそうですね。

ネオンのエフェクト。ちなみにホバーするとネオンが強く光ります。
クリックさせるような場所にぴったり。

こちらは別のタイプのネオンのエフェクトです。
背景が黒系のサイトで目立たせたいときに使えますね。

ネオンパターンその3です。これまた別のタイプのネオンエフェクトです。ちかちかする感じとフォントがおしゃれですね。

See the Pen Rattle Animation by Tyler Gaw (@tylergaw) on CodePen.0

プルプル震えるエフェクト。こちらもポップな感じですね。

結構使うシーンがピンポイントですが、ハロウィーンのエフェクトです。パンプキンがかわいいですね。

See the Pen Smoky Text by Bennett Feely (@bennettfeely) on CodePen.0

煙のように消えていくフォントです。