ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。

今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。

http://photoshopvip.net/97481

http://photoshopvip.net/80725

http://photoshopvip.net/75067

コンテンツ目次

1. アニメーション・テキストエフェクト
2. グリッチ・テキストエフェクト
3. ホバー・テキストエフェクト
4. 回転型テキストエフェクト
5. 影付きテキストエフェクト
6. タイピング・テキストエフェクト

3Dテキストエフェクト

CSS Text Stroke | CSS Text Border

入力した文字が立体的に浮かび上がる、ライン線を利用したテキストエフェクト。

See the Pen CSS Text Stroke | CSS Text Border – Infinite effect only with #CSS #html5 by Ignacio Correia (@igcorreia) on CodePen.

3D extrude text effect- CSS only

文字を押し出したようなビンテージスタイルのテキストエフェクト。

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

3D Text Effect – Mouseover

マウスホバーすることで、赤青メガネで見ると立体的な３Dエフェクトに仕上げます。

See the Pen 3d Text effect – mousemove by Dennis Garrn (@dennisgarrn) on CodePen.

Animated wave clipped by text

文字テキストに水を注いだようなユラユラとしたアニメーションエフェクト。

See the Pen Animated wave clipped by text by web-tiki (@web-tiki) on CodePen.

jQuery Break/Animate Warping Text Paragraph Example

フォントの大きさが時間の経過に合わせてそれぞれ変化するエフェクト。イントロ画面などにどうぞ。

See the Pen jquery break/animate warping text paragraph example by James (@Sitefall) on CodePen.

Smokey Text

表示されている文字テキストが煙のように消える、CSSのみで実現したエフェクト。

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

Bubbling Text Effect

見出しタイトルからボコボコと泡が出現する、ユニークで楽しいアニメーションエフェクト。

See the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.

Animated Text Fill

@keyframeを利用することで、文字テキストの背景のみをアニメーションさせるテクニック。

See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.

Pure CSS Text Animation

ふわりと浮かび上がるテキストエフェクトで、CSSのみでスタイリングされた手軽なテクニック。

See the Pen Pure CSS Text Animation by Robin Treur (@RobinTreur) on CodePen.

Text Color Draw

文字の端がカラフルに変化しながら表示されるテキストエフェクト。

See the Pen text color draw by CJ Gammon (@cjgammon) on CodePen.

Animating SVG Text

文字テキストのSVGアウトラインをアニメーションさせながら表示させる人気スタイルのひとつ。

See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.

Shaded Text

マウスホバーすることでアウトラインが変化する、SVGとCSSでスタイリングされたテクニック。

See the Pen Shaded Text by Rafael González (@rgg) on CodePen.

Text Animation: Montserrat

CSSのStrokeプロパティを調整することで、滑らかに動くアニメーションテキストを表現します。

See the Pen Text Animation: Montserrat by Claire Larsen (@ClaireLarsen) on CodePen.

Animated Text Fill with SVG Text

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

Squiggly Text

See the Pen Squiggly Text by Lucas Bebber (@lbebber) on CodePen.

Shattering Text Animation

文字テキストがバラバラの破片のように飛び散るアニメーションエフェクト。

See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.

Wave Text Effect (with SVG Blend Mode)

レイヤー状に重なった背景が、波のようにユラユラとアニメーションするHTML／CSSスニペット。

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

GSAP Text Animation

See the Pen GSAP Text Animation by Nate Wiley (@natewiley) on CodePen.

Colorful Text Animation

文字テキストが美しいグラデーションで変化を続けるアニメーションエフェクト。

See the Pen #webdev series – Colorful text animation #updated by Hendry Sadrak (@hendrysadrak) on CodePen.

Animated Text with Snap SVG

塗り絵のように文字テキストをカラフルにペイントします。

See the Pen Animated text with Snapsvg by yoksel (@yoksel) on CodePen.

SVG Path Animated Text

SVGパスアニメーションを利用したテキストエフェクトは、ロゴなど目立たせたい部分に。

See the Pen SVG Path animated Text by Tamino Martinius (@Zaku) on CodePen.

Animated Text-Shadow Pattern

See the Pen [webkit] Animated “text-shadow” pattern by carpe numidium (@carpenumidium) on CodePen.

Line Text.

点と点を線で結んで出来あがった、幾何学模様のアニメーションエフェクト。

See the Pen Line text. by Johan Fagerbeg (@birjolaxew) on CodePen.

The Wave

SVGを活用することで、文字テキストがユラユラと波打っている様子を表現できます。

See the Pen The Wave by Chris Coyier (@chriscoyier) on CodePen.

Opening Sequence

文字テキストがふわりと表示され、映画のオープニングテーマのような雰囲気を演出できます。

See the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.

SVG Stroke Reveal Animation

See the Pen SVG Stroke Reveal Animation by Catalin Mortan (@dererstekaktus) on CodePen.

CSS Animated Neon Sign

ネオンライトのようにチカチカとしながら光るテキストエフェクト。

See the Pen CSS animated Neon Sign by Nodws (@nodws) on CodePen.

CSS Particle Effects

文字テキストからハートや星型などキラキラさせて表示させるアニメーションエフェクト。

See the Pen CSS Particle Effects by Atticus Koya (@OfficialAntarctica) on CodePen.

SVG Masking Path Animation

手書き風筆記体フォントをアニメーション合わせて表示するテクニック。

See the Pen SVG Masking Path Animation by Steven Sinatra (@diagramatics) on CodePen.

グリッチエフェクト

CSS3 Glitch Animation

文字サイズに合わせて３種類のグリッチエフェクト用スタリングが収録されています。

See the Pen CSS3 Glitch Animation by Petr Tichy (@ihatetomatoes) on CodePen.

VHS Text

古いブラウン管のテレビで映し出したようなグリッチエフェクトを再現します。

See the Pen VHS text by Maria (@Shorina) on CodePen.

Glitched Text

See the Pen Glitched Text (study of The Verge) by Derek Palladino (@derekjp) on CodePen.

Glitch Text

HTMLとCSSのみでスタイリングされたグリッチエフェクトで実装もお手軽。

See the Pen Glitch Text by zoite (@zoite) on CodePen.

Glitchy Text

See the Pen Glitchy Text by Matt Stvartak (@mattstvartak) on CodePen.

CSS-Only Glitch Effect

こちらもCSSのみでスタイリングできるグリッチエフェクト。

See the Pen CSS-Only Glitch Effect by Justin (@nilbog) on CodePen.

CSS Glitched Text

See the Pen css glitched text by skew by naiting (@sliiice) on CodePen.

ホバー・テキストエフェクト

CSS Perspective Text Hover

マウスホバーすることで階段状に展開するテキストエフェクト。

See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.

3D Hover Text Effect

See the Pen 3d hover text effect by Sascha Sigl (@SaschaSigl) on CodePen.

Animated Highlighted Text

マウスホバーでも次テキスト全体をハイライトできるスタイリングテクニック。

See the Pen Animated highlighted text by Rian Ariona (@ariona) on CodePen.

Happy Text

カラフルな文字テキストがウェーブするユニークなアニメーション。

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

Peeled Text Transforms

文字テキストが立体的にめくれたようなスタイルを実現するエフェクト。

See the Pen Peeled Text Transforms by Michiel Bijl (@Michiel) on CodePen.

Text-Mask Background Moving on MouseMove

マウスカーソルの動きに合わせて背景イメージが動くテキストエフェクト。

See the Pen Text-mask background moving on MouseMove – v2 by Robert Borghesi (@dghez) on CodePen.

Efek Typography Text Neon Part 1

文字テキストにマウスカーソルを合わせると、ネオンライトのようにぼんやりと暗闇に光るエフェクト。

See the Pen Efek Typography Text Neon part 1 by Prima Utama Apriansyah (@primaapriansyah) on CodePen.

回転型テキストエフェクト

3D Quote Rotator

くるくると回転しながら文字テキストが集まって表示されるエフェクト。

See the Pen #Codevember 3D Quote Rotator by Nate Wiley (@natewiley) on CodePen.

Rotating Text

入力した文字テキストの一部がくるくると変化するアニメーションエフェクト。

See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen.

Vertically Rotating Text CSS with Broswer Prefixes

各種モダンブラウザでの動きにも対応した、実践的な回転型テキストエフェクト。

See the Pen Vertically rotating text css w/ browser prefixes by Jacob (@JacobStone420) on CodePen.

SVG Motion

文字テキストをルーレット上にクルクルさせながら表示するテクニック。

See the Pen #codevember 01 – svg motion by coderitual (@coderitual) on CodePen.

シャドウ付きテキストエフェクト

Styling Text with SVG

まるで紙幣のような影付きテキストエフェクトを実現するテクニック。

See the Pen Styling Text with SVG (Second Shadow) by Code School (@codeschool) on CodePen.

Pretty Shadow

text-shadowプロパティを利用するだけで実装可能なテキストエフェクト。

See the Pen Pretty shadow by Alex Moore (@MoorLex) on CodePen.

Variable Longshadow with Gradients Mixin

フラットスタイルから派生したロングシャドウ・エフェクトをCSSで実現するテクニック。

See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi (@dariocorsi) on CodePen.

Awesome Text-Shadow

まるで本物そっくりなほどリアルなドロップシャドウエフェクトをCSSで再現します。

See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.

Do Amazing Things

See the Pen do amazing things by Zhenya Nemerovchenko (@JenyaNem) on CodePen.

Text Shadow

古いビンテージ風文字エフェクトを表現した、影付きテキスト用スタイリング。

See the Pen Text-Shadow by Mayur Elbhar (@mayurelbhar) on CodePen.

CSS Text Shadow

文字同士が立体的に重なり合ったように見せる、ドロップシャドウをうまく利用したテキストエフェクト。

See the Pen CSS Text Shadow by Chris Eisenbraun (@chriseisenbraun) on CodePen.

Long Shadow Gradient Mixin

Mixinを利用することで、リアルな質感のドロップシャドウを手軽に表現できるテクニック。

See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.

CSS Text Shadow Effects

エレガントなドロップシャドウから型押しレタープレスエフェクトまでCSSのみで実現したスタリング。

See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.

CSS Dashed Shadow

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

タイピング・テキストエフェクト

Auto Typing Text (function)

パソコンで入力したような文字テキストのタイピングエフェクト、ファイルサイズも小さくより手軽に利用できます。

See the Pen Auto Typing Text (function) by Connor Gaunt (@ConnorGaunt) on CodePen.

Love Text Effect

See the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.

Kinetic Type with Greensock

表示されている単語が、入力した文字テキストへとアニメーション付きで変化していきます。

See the Pen Kinetic Type with Greensock by Nerdmanship (@nerdmanship) on CodePen.

Scramble Text Effect

文字テキストをスクランブル状態で表示できるエフェクト。

See the Pen Text Scramble Effect by Justin Windle (@soulwire) on CodePen.

Transmission: Glowing Text Animation

ぼんやりと白く光りながら表示されるテキストアニメーション。

See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.

Futuristic Resolving/Typing Text Effect feat. GLaDOS

空港の連絡掲示板のようなパタパタと文字が切り替わるアニメーションエフェクト。

See the Pen Futuristic Resolving/Typing Text Effect feat. GLaDOS by Kevin (@qkevinto) on CodePen.

Text Typing Thingamy

See the Pen Text typing thingamy by Jack Armley (@jackarmley) on CodePen.

SVG Text: Animated Typing

SVGテキストを利用することで、柔軟なアニメーションエフェクトに対応できるタイピング効果。

See the Pen SVG Text: Animated Typing by Tiffany Rayside (@tmrDevelops) on CodePen.

Typing Text with Javascript

わずかなコードを加えるだけで、実際にタイピングしているようなアニメーションエフェクトを実現できます。

See the Pen Typing Text with Javascript by Max (@MyXoToD) on CodePen.

海外サイト Free Frontend で公開された 61 CSS Text Effects より許可をもらい、特にピックアップしたい作品を中心に転載、追加記述しています。

参照元リンク : 61 CSS Text Effects – FreeFrontend.com

【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選はPhotoshopVIPで公開された投稿です。