多くのブラウザがCSS3に対応したことで、これまでPhotoshopやIllustratorなどのデザインソフトでしか表現できなかったテキストエフェクトが、CSSスタイリングのみでも実現できるようになりました。
海外デザインブログDesign Your Wayで、CSSでデザインされたクリエイティブなテキストエフェクトをまとめたエントリー「Yes, You Can Actually Make These Text Effects in CSS」が公開されていたので、今回はご紹介します。
詳細は以下から。
CSSでスタイリングした、すごいテキストエフェクトまとめ
SVGファイルを利用することで、テキストラインをアニメーション付きでカラフルに表現します。
-webkit-background-clip:text CSS Effect
-webkit-background-clipを利用することで、テキスト範囲をマスキングすることができます。
テキストがブルブルと震えるようなエフェクトも、CSSスタイリングのみで表現されています。
テレビが故障したようなグリッチ・エフェクトを実現したテキストエフェクト。
グリッチ・エフェクトにカラフルなポリゴン風テクスチャを利用した、404ページのサンプルデモ。
コンテンツを読み込むタイミングで、ボールが跳ねるようなアニメーションエフェクトが素敵なスタイリング。
アルファベットが円を描きながら、英単語の周りを回ります。
入力したテキスト文字を、アニメーションを使い入れ替えることができ、見出しタイトルなどにも◎。
テキストにマウスをホバーすると、扉が開くようなアニメーションが実装されています。
Animated Signing of Signature SVG Paths
筆記体で描かれた署名サインを、SVGパスを利用することで、まるで手書きしているようなエフェクトを実現。
テキストをタイピングしているようなエフェクトが面白いCSSスタイリング。
テキスト文字をアニメーション付ストライプでペイントするテクニック。
煙でテキスト文字が隠れてしまうスタイリングがユニーク。
テキスト文字が飛んでいるようなエフェクトで並べられていきます。
テキストがキラリと光っているようなアニメーション。
テキストにマウスをホバーに応じてドロップシャドウが変化し、立体的なデザインを演出しています。
グラデーションとドロップシャドウを活用することで、質感たっぷりなテキストエフェクトを作成します。
こちらもtext-shadowを使って、立体感たっぷりにテキストを表現します。
まるでPhotoshopで作成したような、立体感たっぷりなテキストエフェクトを完成させます。
文字が真っ二つに切られた様子を表現できるスタイリング。
ストライプ柄のドロップシャドウを加えた、レトロスタイルのテキストエフェクト。
-webkit-mask-imageとtext-shadowを使ったマスキングテクニック。
テキストをアーチ状に配置した、ビンテージスタイルのCSSスタイリング。
ウィンドウ幅に応じて、テキストを自動整列してくれるスタイリング。
CSSのみでスタイリングされた、超立体的なアニメーションテキスト。
A Collection of CSS-Text Shadow & Pattern
text-shadowプロパティを使った、ホバーエフェクト各種を揃えています。
チカチカと点滅するネオンサインを再現したCSSスタイリング。
映画「マトリックス」のオープニングテーマを再現した、画面上から文字が落ちてくるエフェクトが素敵。
テキストの上をボールが跳ねる、曲の歌詞を表示するカラオケ機能のようなCSSスタイリングを実現しています。
ランダムに並べられたアルファベット文字を組み合わせ、現在時刻を表示します。
スクロールすることで、文章のはじまりとおわりをフェードアウトさせるテクニック。
Googleウェブフォントで利用なフォントで、美しいアンパサンド（＆）記号をフォント毎にまとめています。
サムネイル@: Text-mask backgorund moving on MouseMove – v2 – CodePen
参照元リンク : Yes, You Can Actually Make These Text Effects in CSS – Design Your Way
