みなさん。こんにちは。
今回は、CSSでデザインされたテキストエフェクトを紹介しようと思います。
以前なら、PhotoshopやIllustratorを使ってしか表現することができなかった
デザインがCSSを使って表現できるようになりました。
CodePenでいくつか公開されていたのでまずは見てください！
テキストにホバーするとドアが開くようなエフェクト
See the Pen
Opening type by Diego Pardo (@diegopardo)
on CodePen.
テキストがアーチ状に配置
See the Pen
Vintage Typography by Henrique Zambonin (@zambo)
on CodePen.
立体的なテキスト
See the Pen
3D CSS Typography by Noah Blon (@noahblon)
on CodePen.
ネオンのエフェクト
See the Pen
Neon Glow by Felix Rilling (@FelixRilling)
on CodePen.
SVGを使ったテキストエフェクト
See the Pen
Elastic stroke CSS + SVG by yoksel (@yoksel)
on CodePen.
アニメーションを使ったテキスト
See the Pen
Animated text fill by Daniel Riemer (@zitrusfrisch)
on CodePen.
こちらもアニメーションを使ったテキスト
See the Pen
Growing Grassy Text with Variable fonts. by Mandy Michael (@mandymichael)
on CodePen.
サイトタイトルや見出しに使えるデザインがたくさんありましたね。
テキストにアニメーションを付けるだけでユーザーにインパクトを与え、
目を引くポイントになるかと思います。
今後、ウェブサイトをデザインする時にでも活用してみてください。
