CSSスタイリングで表現できる!すごいテキストエフェクト33個まとめ

css-texteffect2015-top

 

多くのブラウザがCSS3に対応したことで、これまでPhotoshopやIllustratorなどのデザインソフトでしか表現できなかったテキストエフェクトが、CSSスタイリングのみでも実現できるようになりました。

 

海外デザインブログDesign Your Wayで、CSSでデザインされたクリエイティブなテキストエフェクトをまとめたエントリー「Yes, You Can Actually Make These Text Effects in CSS」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

CSSでスタイリングした、すごいテキストエフェクトまとめ

 

Elastic Stroke CSS + SVG

SVGファイルを利用することで、テキストラインをアニメーション付きでカラフルに表現します。

See the Pen Elastic stroke CSS + SVG by yoksel (@yoksel) on CodePen.

 

 

 

-webkit-background-clip:text CSS Effect

-webkit-background-clipを利用することで、テキスト範囲をマスキングすることができます。

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.

 

 

 

Squiggly Text Experiment

テキストがブルブルと震えるようなエフェクトも、CSSスタイリングのみで表現されています。

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

 

 

 

CSS Glitched Text

テレビが故障したようなグリッチ・エフェクトを実現したテキストエフェクト。

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

 

 

 

Colorful Glitchy 404

グリッチ・エフェクトにカラフルなポリゴン風テクスチャを利用した、404ページのサンプルデモ。

See the Pen Colorful Glitchy 404 by mistic100 (@mistic100) on CodePen.

 

 

 

A Pen By Ian Gloude

コンテンツを読み込むタイミングで、ボールが跳ねるようなアニメーションエフェクトが素敵なスタイリング。

See the Pen ByVYZK by Ian Gloude (@igloude) on CodePen.

 

 

 

Cosmos

アルファベットが円を描きながら、英単語の周りを回ります。

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

 

 

 

Text Animation

入力したテキスト文字を、アニメーションを使い入れ替えることができ、見出しタイトルなどにも◎。

See the Pen Text animation by Yoann (@yoannhel) on CodePen.

 

 

 

Opening Type

テキストにマウスをホバーすると、扉が開くようなアニメーションが実装されています。

See the Pen Opening type by Diego Pardo (@diegopardo) on CodePen.

 

 

 

Animated Signing of Signature SVG Paths

筆記体で描かれた署名サインを、SVGパスを利用することで、まるで手書きしているようなエフェクトを実現。

See the Pen Animated signing of signature (SVG paths) by Gary Hepting (@ghepting) on CodePen.

 

 

 

Love Text Effect

テキストをタイピングしているようなエフェクトが面白いCSSスタイリング。

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

 

 

 

Animated Text Fill

テキスト文字をアニメーション付ストライプでペイントするテクニック。

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

 

 

 

Foggy Text Effect

煙でテキスト文字が隠れてしまうスタイリングがユニーク。

See the Pen Foggy text effect by andreas_pr (@andreas_pr) on CodePen.

 

 

 

Fly in, Fly out

テキスト文字が飛んでいるようなエフェクトで並べられていきます。

See the Pen Fly in, fly out by Neil Carpenter (@neilcarpenter) on CodePen.

 

 

 

CSS Shimmer Text Effect

テキストがキラリと光っているようなアニメーション。

See the Pen CSS Shimmer Text Effect by Robert Douglas (@redouglas) on CodePen.

 

 

 

Shine.js

テキストにマウスをホバーに応じてドロップシャドウが変化し、立体的なデザインを演出しています。

See the Pen shine.js by Miwako Nakasuka (@msuka) on CodePen.

 

 

 

Milky Font Effect

グラデーションとドロップシャドウを活用することで、質感たっぷりなテキストエフェクトを作成します。

See the Pen Milky Font Effect by Jorge Epuñan (@juanbrujo) on CodePen.

 

 

 

Hit the Floor Text Effect

こちらもtext-shadowを使って、立体感たっぷりにテキストを表現します。

See the Pen Hit The Floor Text Effect by ThatGuySam (@ThatGuySam) on CodePen.

 

 

 

CSS3 Isometric Text Effect

まるでPhotoshopで作成したような、立体感たっぷりなテキストエフェクトを完成させます。

See the Pen CSS3 Isometric Text Effect created by Duncan Midwinter. by vavik (@vavik96) on CodePen.

 

 

 

Slashed CSS Effect

文字が真っ二つに切られた様子を表現できるスタイリング。

See the Pen Slashed CSS Effect by Robert Messerle (@robertmesserle) on CodePen.

 

 

 

CSS Dashed Shadow

ストライプ柄のドロップシャドウを加えた、レトロスタイルのテキストエフェクト。

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

 

 

 

Masked Text-Shadow

-webkit-mask-imagetext-shadowを使ったマスキングテクニック。

See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.

 

 

 

Vintage Typography

テキストをアーチ状に配置した、ビンテージスタイルのCSSスタイリング。

See the Pen Vintage Typography by Henrique Zambonin (@zambo) on CodePen.

 

 

 

SVG Scalable Text

ウィンドウ幅に応じて、テキストを自動整列してくれるスタイリング。

See the Pen SVG Scalable Text – IE by Pete Corey (@pcorey) on CodePen.

 

 

 

3D CSS Typography

CSSのみでスタイリングされた、超立体的なアニメーションテキスト。

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

 

 

 

A Collection of CSS-Text Shadow & Pattern

text-shadowプロパティを使った、ホバーエフェクト各種を揃えています。

See the Pen A collection of CSS text-shadow and pattern effects by Ashley Nolan (@ashleynolan) on CodePen.

 

 

 

Noen Effect

チカチカと点滅するネオンサインを再現したCSSスタイリング。

See the Pen Neon by Neil Carpenter (@neilcarpenter) on CodePen.

 

 

 

Matrix Text Effect

映画「マトリックス」のオープニングテーマを再現した、画面上から文字が落ちてくるエフェクトが素敵。

See the Pen Matrix Text Effect by Collin Henderson (@hendo13) on CodePen.

 

 

 

Ball Bouncing on Text

テキストの上をボールが跳ねる、曲の歌詞を表示するカラオケ機能のようなCSSスタイリングを実現しています。

See the Pen Ball Bouncing On Text by Yogev Ahuvia (@kindofone) on CodePen.

 

 

 

Text Clock

ランダムに並べられたアルファベット文字を組み合わせ、現在時刻を表示します。

See the Pen Text Clock by Bill Searle (@searleb) on CodePen.

 

 

 

Fade Text

スクロールすることで、文章のはじまりとおわりをフェードアウトさせるテクニック。

See the Pen Fade text by Teo Dragovic (@teodragovic) on CodePen.

 

 

 

Elegant Ampersand

Googleウェブフォントで利用なフォントで、美しいアンパサンド(&)記号をフォント毎にまとめています。

See the Pen Elegant Ampersands by John D. Jameson (@johndjameson) on CodePen.

 

 

サムネイル@: Text-mask backgorund moving on MouseMove – v2 – CodePen

参照元リンク : Yes, You Can Actually Make These Text Effects in CSS – Design Your Way