多くのブラウザがCSS3に対応したことで、これまでPhotoshopやIllustratorなどのデザインソフトでしか表現できなかったテキストエフェクトが、CSSスタイリングのみでも実現できるようになりました。
海外デザインブログDesign Your Wayで、CSSでデザインされたクリエイティブなテキストエフェクトをまとめたエントリー「Yes, You Can Actually Make These Text Effects in CSS」が公開されていたので、今回はご紹介します。
詳細は以下から。
CSSでスタイリングした、すごいテキストエフェクトまとめ
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.
テキストがブルブルと震えるようなエフェクトも、CSSスタイリングのみで表現されています。
See the Pen Squiggly Text Experiment by Lucas Bebber (@lbebber) on CodePen.
テレビが故障したようなグリッチ・エフェクトを実現したテキストエフェクト。
See the Pen CSS Glitched Text by Lucas Bebber (@lbebber) on CodePen.
グリッチ・エフェクトにカラフルなポリゴン風テクスチャを利用した、404ページのサンプルデモ。
See the Pen Colorful Glitchy 404 by mistic100 (@mistic100) on CodePen.
コンテンツを読み込むタイミングで、ボールが跳ねるようなアニメーションエフェクトが素敵なスタイリング。
See the Pen ByVYZK by Ian Gloude (@igloude) on CodePen.
アルファベットが円を描きながら、英単語の周りを回ります。
See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.
入力したテキスト文字を、アニメーションを使い入れ替えることができ、見出しタイトルなどにも◎。
See the Pen Text animation by Yoann (@yoannhel) on CodePen.
テキストにマウスをホバーすると、扉が開くようなアニメーションが実装されています。
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.
テキストをタイピングしているようなエフェクトが面白いCSSスタイリング。
See the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.
テキスト文字をアニメーション付ストライプでペイントするテクニック。
See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.
煙でテキスト文字が隠れてしまうスタイリングがユニーク。
See the Pen Foggy text effect by andreas_pr (@andreas_pr) on CodePen.
テキスト文字が飛んでいるようなエフェクトで並べられていきます。
See the Pen Fly in, fly out by Neil Carpenter (@neilcarpenter) on CodePen.
テキストがキラリと光っているようなアニメーション。
See the Pen CSS Shimmer Text Effect by Robert Douglas (@redouglas) on CodePen.
テキストにマウスをホバーに応じてドロップシャドウが変化し、立体的なデザインを演出しています。
See the Pen shine.js by Miwako Nakasuka (@msuka) on CodePen.
グラデーションとドロップシャドウを活用することで、質感たっぷりなテキストエフェクトを作成します。
See the Pen Milky Font Effect by Jorge Epuñan (@juanbrujo) on CodePen.
こちらもtext-shadowを使って、立体感たっぷりにテキストを表現します。
See the Pen Hit The Floor Text Effect by ThatGuySam (@ThatGuySam) on CodePen.
まるでPhotoshopで作成したような、立体感たっぷりなテキストエフェクトを完成させます。
See the Pen CSS3 Isometric Text Effect created by Duncan Midwinter. by vavik (@vavik96) on CodePen.
文字が真っ二つに切られた様子を表現できるスタイリング。
See the Pen Slashed CSS Effect by Robert Messerle (@robertmesserle) on CodePen.
ストライプ柄のドロップシャドウを加えた、レトロスタイルのテキストエフェクト。
See the Pen CSS Dashed Shadow by Lucas Bebber (@lbebber) on CodePen.
-webkit-mask-imageとtext-shadowを使ったマスキングテクニック。
See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.
テキストをアーチ状に配置した、ビンテージスタイルのCSSスタイリング。
See the Pen Vintage Typography by Henrique Zambonin (@zambo) on CodePen.
ウィンドウ幅に応じて、テキストを自動整列してくれるスタイリング。
See the Pen SVG Scalable Text – IE by Pete Corey (@pcorey) on CodePen.
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.
チカチカと点滅するネオンサインを再現したCSSスタイリング。
See the Pen Neon by Neil Carpenter (@neilcarpenter) on CodePen.
映画「マトリックス」のオープニングテーマを再現した、画面上から文字が落ちてくるエフェクトが素敵。
See the Pen Matrix Text Effect by Collin Henderson (@hendo13) on CodePen.
テキストの上をボールが跳ねる、曲の歌詞を表示するカラオケ機能のようなCSSスタイリングを実現しています。
See the Pen Ball Bouncing On Text by Yogev Ahuvia (@kindofone) on CodePen.
ランダムに並べられたアルファベット文字を組み合わせ、現在時刻を表示します。
See the Pen Text Clock by Bill Searle (@searleb) on CodePen.
スクロールすることで、文章のはじまりとおわりをフェードアウトさせるテクニック。
See the Pen Fade text by Teo Dragovic (@teodragovic) on CodePen.
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
