CSS3の広がる可能性!美しいテキストエフェクト用コードスニペット24個まとめ

css-texteffect-2015aug-top (1)

 

Webデザインにおける文字テキストデザインは、これまでにないスタイリッシュなエフェクトが登場しています。新しいCSS3プロパティを利用し、JavaScriptでカスタマイズすることで、より魅力的な作品に仕上げます。

 

 

今回は、今後のデザインプロジェクトで活用したい、CSS3を利用した美しいテキストエフェクトをまとめてご紹介します。どのようなスタイリングがされているのか確認することもでき、コピー&ペーストで実用できる点もポイントです。

 

 

 

詳細は以下から。

 

 

 

CSS3の新しい可能性!美しいテキストエフェクト用コードスニペット24個まとめ

 

10 Stunning Hover Effects with SCSS

HTMLとCSSのみで表現された、アニメーション豊かなホバーエフェクト10種類。

See the Pen 10 stunning hover effects with scss by Renan C. araujo (@caraujo) on CodePen.

 

 

 

 

Magnettype

カラフルなアルファベットが、ふわりと浮かびあがってくる、HTML/CSSテキストエフェクト。

See the Pen Magnetype by Bennett Feely (@bennettfeely) on CodePen.

 

 

 

CSS Text Filling with Water

コップに水が注がれているようなエフェクトを、アルファベットで表現したテキストエフェクト。

See the Pen CSS Text filling with water by xiaodong (@hxd) on CodePen.

 

 

 

Nice SCSS Typography Underline

フォントのベースラインに沿って引かれた下線は、フォントに被らないように工夫されています。

See the Pen Nice SCSS typography underline by MrPirrera (@pirrera) on CodePen.

 

 

 

Scotch Digital Logo

ドット状に表現されたアルファベットに、マウスカーソルを合わせると爆発エフェクトが。

See the Pen Scotch Digital Logo by Nicholas Cerminara (@ncerminara) on CodePen.

 

 

 

Jelly Letters

マウスをぐるぐると動かすことで、文字テキストを操ることができるユニークな仕掛け。

See the Pen Jelly letters by Mauricio Allende (@mallendeo) on CodePen.

 

 

 

3D Text Effect

スクリーン上でマウスを動かした方向に、テキストに立体的なエフェクトが追加されます。

See the Pen 3d Text effect – mousemove by Dennis Garrn (@dennisgarrn) on CodePen.

 

 

 

GSAP IS:

並べられた英単語にマウスホバーすることで、影付きで立体的に浮かび上がるエフェクトで、text-shadowプロパティを利用しています。

See the Pen GSAP JS: multiple text-shadow : hover by GreenSock (@GreenSock) on CodePen.

 

 

 

The Correct Pronounciation

ほんのりとドロップシャドウを利用した、質感高いテキストエフェクトのひとつで、シンボル記号をローテーション回転させ利用しています。

See the Pen The Correct Pronounciation by Daniel Burrows (@danburrows) on CodePen.

   

 

 

 

CSS3 text-shadow Effects

こちらも複数のtext-shadowプロパティ値を設定することで、リアルな影を表現しています。

See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.

 

 

 

80s Typography

レトロなタイポグラフィエフェクト、クロムとネオンスタイルをCSSで表現。キラリと光が反射します。

See the Pen 80s Typography by David Parker (@boldfacedesign) on CodePen.

   

 

 

 

Star Wars 3D Scrolling Text in CSS3 with Music

往年の人気映画のオープニングシーンを再現した、立体的に文字が自動的にスクロールされます。

See the Pen Star Wars 3D Scrolling Text in CSS3 (with music) by Scott Bram (@squarecat) on CodePen.

 

 

 

New Header Design

文字テキストにストライプパターンを重ね、ナビメニューをマウスホバーで伸縮するアニメーションも実装されています。

See the Pen New header design by Johan van Tongeren (@Dreamdealer) on CodePen.

   

 

 

 

Easy Textures with CSS Masks

CSSのmask-imageプロパティを利用することで、文字テキストにテクスチャを重ねることができます。

See the Pen Easy Textures with CSS Masks by Jeremy Frank (@jeremyfrank) on CodePen.

 

 

 

Masked Text-shadowed

こちらもmask-imageプロパティを利用し、テキスト用ドロップシャドウを、ストライプ柄で表現しています。

See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.

 

 

 

Knockout Text in CSS

background-clipプロパティを利用することで、背景イメージ写真の表示させたい部分のみクリッピングすることができます。

See the Pen Knockout Text in CSS by Crisman Noble (@crismanNoble) on CodePen.

 

 

 

JS/CSS3 Jittery Text Effect

文字テキストが絶えずブルブルと震える、ユニークなアニメーションエフェクト。

See the Pen JS/CSS3 Jittery text effect. by ZeroSpree (@zerospree) on CodePen.

 

 

 

 

CSS Typography

スタイルシートのみで作成し、タイポグラフィ・ポスターのようなデザインに仕上げます。

See the Pen CSS3 Typography by Nate Scott (@natewscott) on CodePen.

 

 

 

Webfont Demo

ウェブフォントをつかって、さまざまなエフェクトを実験しているテキストエフェクト。

See the Pen Webfont Demo by Stephy (@blindingstars) on CodePen.

 

 

 

Type Style, Skewed Viewport Units

文字テキストを自由な方向に傾けることができるテクニック。

See the Pen Type style, skewed, viewport units by Kurt Emch (@kemch) on CodePen.

 

 

 

3D Text Effect

text-shadowプロパティを重ねて適用することで、立体的なデザインを演出できます。

See the Pen 3D text effect by Brian Guerrero (@brian-guerrero) on CodePen.

 

 

 

CSS Text-FX

keyframeアニメーションを利用することで、ピカピカと点滅する文字テキストを完成させます。

See the Pen CSS Text-FX by moklick (@moklick) on CodePen.

 

 

 

Opening Sequence

映画のオープニングシーンを見ているような気分にさせる、ぼかしエフェクトが美しいデザイン。

See the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.

 

 

 

 

Circles, Text and GetlmageData

入力した文字テキストを、カラフルなドットを組み合わせて、JS/CSSで表現するデザインテクニック。

See the Pen Circles, text and getImageData by Rachel Smith (@rachsmith) on CodePen.

 

 

 

CSSスタイリングで表現できる!すごいテキストエフェクト33個まとめ

以前まとめたエントリーで、今回未紹介のエフェクトを中心に揃えています。

css-texteffect2015-top

 

 

参照元リンク : Beautiful Examples of CSS3 Typography Code Snippets – Marketblog Envato