デザイン

デザイン

進化するWebタイポグラフィを感じよう!クールなCSSテキストエフェクト20選

1,287 views

Webサイトのデザインに使えるクールなテキストエフェクトをお探しの方へ!

Webサイトがパッと見られたときに、サイト訪問者に強く印象を残すタイポグラフィは非常に使い勝手がいいですよね。

 

しかしこれまでPhotoshopでやりくりしていたデザイナーも、CSSでできる範囲が拡がり、またほとんどのブラウザでサポートされるようになったことで、Web上のタイポグラフィは大きく変わろうとしています。

 

これからご紹介するCSSのテキストエフェクトの多くはCSS3のコーディングのみでデザインされたものですが、一部では少しだけJavascriptを合わせてデザインしたものもあります。

 

CSS3の登場で劇的に変わりつつあるWebタイポグラフィのアイデアとして、クールなテキストエフェクト20選をチェックしてみてください。

 

クールなCSSテキストエフェクト20選

 

しなやかストローク CSS+SVG

XJbzrO

 

テキストアニメーション

sJpDj

 

宇宙エフェクト

JoZabN

 

Loading Text

ByVYZK

 

波型エフェクト

xrwja

 

くねくねエフェクト

KwGEQv

 

アニメーションするヘッドライン

animated-headlines

 

シャドウエフェクト

yGpAK

 

オープニングタイプ

 

GqEho

 

霧がかったエフェクト

QwLZVZ

 

SVGマスク(透過)エフェクト

CHgrn

 

サインの動きをアニメーションするエフェクト

 

xnezB

 

SVGグリッチエフェクト

ArFvk

 

ヴィンテージタイポグラフィ

jKEDp

 

webkitを背景に用いたエフェクト

crlxk

 

3Dエフェクト

CsxfH

 

カラフルなグリッチエフェクト

zAren

 

激しく踊る(?)エフェクト

CytDA

 

スラッシュをつけたエフェクト

Lebco

 

キザキザシャドウエフェクト

BzoHi

 

(※本稿は「Cool CSS Text Effects – 20 Amazing Examples」を翻訳・再編集したものです)

関連記事

おすすめ記事