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

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

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

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

Fade in & out animation

See the Pen (Title) Fade in & out animation by SnailCrusher (@Sector22) on CodePen.0


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

Plastic Text CSS

See the Pen Plastic Text CSS by Roberto (@roberto3000) on CodePen.0


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

Arcade Text CSS

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


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

PICADILLY CIRCUS

See the Pen
PICADILLY CIRCUS
by BROWNERD (@brownerd)
on CodePen.


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

3D extrude text effect- CSS only

See the Pen 3D extrude text effect- CSS only by Pete Leidy (@pleidy) on CodePen.0


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

Neon Text Effect (CSS Only)

See the Pen Neon Text Effect (CSS Only) by Glyphs Company (@glyphs) on CodePen.0


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

neon text effect _ css

See the Pen neon text effect _ css by Balázs Csabák (@bal-zs-csab-k) on CodePen.0


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

Oldschool neon text only CSS

See the Pen Oldschool neon text only CSS by alexandros mountrihas (@alxdigitalbeings) on CodePen.0


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

Rattle Animation

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


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

CSS Spooky Halloween Pumpkin

See the Pen CSS Spooky Halloween Pumpkin by Jaume Sanchez (@spite) on CodePen.0


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

Smoky Text

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


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

まとめ

CSSのエフェクトならこちらもおすすめです!
【CSS】CSSだけで実装できるハイセンスなテキストエフェクト30選!