おおたおおた
2017/08/17

HTML/CSSで表現できる!テキストエフェクト7選

この記事は約5分で読めます。

HTML/CSSで表現できる!テキストエフェクト7選

CSS

オシャレなテキストエフェクト

こちらはtext-shadowを利用してデザインされているテキストのようです。
おしゃれでかわいいのに、簡単にできそうです!

See the Pen CSS Blend Mode Text Effect by Mandy Michael (@mandymichael) on CodePen.0

テキストでローディングアニメーション

テキストのみでLoadingアニメーションを表現してくれています。
便利ですね!

See the Pen Filling text effect by Vangel Tzo (@srekoble) on CodePen.0

炎が燃え盛る!テキストエフェクト

こちらはSVGタグを使用して作られています。
SVGは画像ではなくコードで描画しているので、モバイル端末での拡大にも強いですね。

SVGを使ったことはないのですが、基本的な使い方を見ながら。↓
https://euske.github.io/euskecs/lec_svg/index.html

炎はgif画像を使っているみたいなので、フリー素材を探してみてください。

See the Pen Text Effect by Noor AL-Hassan (@N00R_alhassan1) on CodePen.0

3Dテキストエフェクト

これまた素敵なテキストエフェクトです。
背景グリッド画像の角度と、テキストの角度を合わせるのが大変そう!

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

タイプライターの様に文字が出てくるエフェクト

こちらはHTMLとSCSSを使用しています。
なんて素敵なエフェクトでしょう!!

See the Pen #21 – Typing text effect with CSS only by Bojan Krsmanovic (@bojankrsmanovic) on CodePen.0

ポップでかわいい!ホバーテキストエフェクト

こちらはポップでとっても可愛らしいエフェクト&デザインです!
何度でもHoverしてしまいます。

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

mix-blend-modeを使用したテキストエフェクト

縦にバウハウス。かっこいいので思わず!
mix-blend-modeはCSS3のエフェクトですが、「乗算」などの描画をすることができます。
何せ発想がオシャレ♪

See the Pen Text effect with blend modes: Swiss design by Mandy Michael (@mandymichael) on CodePen.0

HTML/CSSで表現できる!テキストエフェクト7選
おおた イラストレーター / フロントエンジニア

リトルトゥースです。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。