mozmoz

| ウェブのあれこれ中心のブログです

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

2018年8月19日

CSS3になってから、今までは画像で処理していたデザインをCSSで表現できるようになってきました。その進化は目覚ましく、あんなとこやそんなとこまでCSSでできるようになってきました。
以前はボタンのホバーエフェクトを紹介しましたが、今回はテキストエフェクト編です。

今回はHTMLとCSSだけで表現できるハイセンスなテキストのエフェクトをCodePenから集めてきました。流行りのデザインもいくつかあるので、ぜひWebサイトの制作の参考にしてみてください。

1. 3D extrude text effect- CSS only

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

これ本当にCSSなの!?って驚きました。ロゴ、ステッカーのような仕上がりです。フォントにはGooglefontが使用されてます。ハイレベルな上におしゃれです。

2. Text effect with blend modes: Swiss design

See the Pen Text effect with blend modes: Swiss design by Mandy Michael (@mandymichael) on CodePen.0

この手のエフェクトは最近非常によく見かけるようになりました。流行りのデザインですね。
ブランドサイトとか、海外系のサイトでよく見ます。三種類の色をつくり、beforeとafterでずらして表現しているようです。

3. CSS Glitched Text

See the Pen CSS Glitched Text by Lucas Bebber (@lbebber) on CodePen.0

こちらも最近の海外系のサイトでよく見ます。昔のブラウン管のテレビのような表現ですね。上のエフェクトと合わせて使われたり、ホバーするとこういうエフェクトがかかったり、というような使い方をしているところが多いような気がしますね。

4. 3D CSS Typography

See the Pen 3D CSS Typography by Noah Blon (@noahblon) on CodePen.0

もはやこれどないなっとんねん。とでも言いたくなるようなエフェクトです。えぐい。
ちゃんとCSSとHTMLで表現されてるので恐ろしい。

5. Neon Shine Text Effect // CSS

See the Pen Neon Shine Text Effect // CSS by Srdjan Vezmar (@Srcko85) on CodePen.0

ネオンがシャインしているテキストエフェクトです。こちらもbeforeとafterをうまく駆使してネオン感を表現しているようです。

6. Anaglyph 3d text effects (CSS only)

See the Pen Anaglyph 3d text effects (CSS only) by Ryan Niswonger (@rniswonger) on CodePen.0

「Text effect with blend modes: Swiss design」と近いですがよく見ると下段のボックスが右へ左へとゆーらゆーらしています。

7. typing text effect css

See the Pen typing text effect css by Azez Nassar (@azeznassar) on CodePen.0

タイピングされているような表現です。これもよく見ます。この表現はJSでやるイメージが強かったんですがCSSでもできるんですね。

8. Glitchy Text Effect CSS-only

See the Pen Glitchy Text Effect CSS-only by Rick Hou (@eyecue) on CodePen.0

「CSS Glitched Text」と近いですが微妙に違う。どちらを使うかはお好みに合わせて、ですね。

9. Fade in & out animation

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

まるでSVGのアニメーションのようなCSSアニメーション。縁取りしながらフェードインフェードアウトでテキストをスタイリッシュに見せてくれます。すごい。

10. COSMOS

See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.0

宇宙を感じます。COSMOSのOがくるくると回っています。これテキストのくるくるもすごいんですけど、背景の宇宙もCSSで表現されています。鬼のようなbox-shadowがかけられてました。

11. Playing a CSS animation on hover

See the Pen Playing a CSS animation on hover by Val Head (@valhead) on CodePen.0

NEW!のエフェクトです。バクダンもCSSで表現されてます。ホバーすると回転しますが、それもCSSです。

12. CSS Dashed Shadow

See the Pen CSS Dashed Shadow by Lucas Bebber (@lbebber) on CodePen.0

text-shadowのストライプがCSSで表現されてます。これまたおしゃれなやつですね。飲食系のWebサイトなんかで使えそうです。このストライプ、ホバーすると動きます。細かいところまで作りこまれてますね。

13. Pure CSS 3D perspective render + :hover anim

See the Pen Pure CSS 3D perspective render + :hover anim by Rafael González (@rgg) on CodePen.0

3Dのテキストエフェクトです。リアルな立体感です。それだけでもすごいんですが、これまたホバーするとふわっと浮きます。

14. Blurred, Invisible Ink, and Redacted text (CSS only)

See the Pen Blurred, Invisible Ink, and Redacted text (CSS only) by Adam Ruf (@adamruf) on CodePen.0

文字の一部をぼかしたり、黒塗りしたりしてあります。ホバーしたら文字が出てくる、なんてやったら面白いかもしれないですね。

15. Marvel Logo

See the Pen Marvel Logo by Mike Su (@bydaydesign) on CodePen.0

MARVEL感たっぷりのロゴ。ズームアウトしていく感じはいいですね。

16. Plastic Text CSS

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

まるで白い液体の上に文字が浮いているようなエフェクトです。text-shadowの重ねがけで表現しているみたいです。絶妙ですね。

17. PURE CSS PARALLAX PIXEL STARS

See the Pen BoLWPo by Ragoli (@Glucio) on CodePen.light

これまた後ろの星までCSSです。浮かび上がる感じが蛍みたいできれいです。

18. PURE CSS3 INTRO ANIMATION

See the Pen PURE CSS3 INTRO ANIMATION by Wifeo (@wifeo) on CodePen.light

CSSだけでイントロのアニメーションが作られています。JSなしでここまで作れるとは。

19. Css Perspective

See the Pen Css Perspective by Adriano Interaminense (@interaminense) on CodePen.light

どないなっとんねん。ホバーすると回転する上に、テキストの編集もできます。

20. Bounce css Animation – v2

See the Pen Bounce css Animation – v2 by Elia PEREZ (@Eprz) on CodePen.light

しずくのように落ちていくアニメーションです。雨みたいでかわいいです。

21. Multi column experiment.

See the Pen Multi column experiment. by Spyros Lefkaditis (@spylefkaditis) on CodePen.light

テキストエフェクトというよりはテキストレイアウトですね。アメリカの新聞のようなレイアウトに仕上がってます。おしゃれです。

22. Rainbow Text(Pure Css)

See the Pen Rainbow Text(Pure Css) by Devin (@edwin0258) on CodePen.dark

レインボーなCSS。すごくテンションが高いです。

23. Background on Text (Pure CSS)

See the Pen Background on Text (Pure CSS) by Kaíque Zimerer (@kaiquezimerer) on CodePen.dark

クリッピングマスクのような表現。こちらもよく見ますね。

24. CodePen Peeled Text(Pure CSS)

See the Pen CodePen Peeled Text(Pure CSS) by IlyasR (@IlyasR) on CodePen.dark

紙を切り抜いたようなエフェクト。ホバーするとぱたぱたします。リアルですね。

25. Shuffling text – CSS animation

See the Pen Shuffling text – CSS animation by Steve Mannion (@ghostfood) on CodePen.dark

文字がシャッフルされてます。

26. Moving Text – CSS Animation Setup w/ Marquee Tag

See the Pen Moving Text – CSS Animation Setup w/ Marquee Tag by Chris Drinkut (@ChrisDrinkut) on CodePen.dark

文字がいろんな速さで右へ左へ。ファーストビューでこういう表現を使っているサイトをたまに見かけます。

27. Neon effect, blinking text – CSS Animation Only

See the Pen Neon effect, blinking text – CSS Animation Only by dmnWebDesign (@dmnwebdesign) on CodePen.dark

ネオンはネオンですが、まるで電球が切れかかっているかのような表現がまた細かいですね。この処理が入っているだけでぐっとクオリティが上がります。

28. Neon Text CSS Animation

See the Pen Neon Text CSS Animation by mcolo (@mcolo) on CodePen.dark

こちらもネオン系。ネオン+ホバーです。

29. Wave text effect (with SVG/blend mode)

See the Pen Wave text effect (with SVG/blend mode) by Lucas Bebber (@lbebber) on CodePen.dark

ナミナミしてます。SVGが使われいているようです。

30. Animated text fill with svg text practice

See the Pen Animated text fill with svg text practice by Cesar C. (@cesar2535) on CodePen.dark

ゲームのタイトルのようなアニメーションです。ワクワクしますね。