【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
ゲームのタイトルのようなアニメーションです。ワクワクしますね。
