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.
カラフルなアルファベットが、ふわりと浮かびあがってくる、HTML/CSSテキストエフェクト。
See the Pen Magnetype by Bennett Feely (@bennettfeely) on CodePen.
コップに水が注がれているようなエフェクトを、アルファベットで表現したテキストエフェクト。
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.
ドット状に表現されたアルファベットに、マウスカーソルを合わせると爆発エフェクトが。
See the Pen Scotch Digital Logo by Nicholas Cerminara (@ncerminara) on CodePen.
マウスをぐるぐると動かすことで、文字テキストを操ることができるユニークな仕掛け。
See the Pen Jelly letters by Mauricio Allende (@mallendeo) on CodePen.
スクリーン上でマウスを動かした方向に、テキストに立体的なエフェクトが追加されます。
See the Pen 3d Text effect – mousemove by Dennis Garrn (@dennisgarrn) on CodePen.
並べられた英単語にマウスホバーすることで、影付きで立体的に浮かび上がるエフェクトで、text-shadowプロパティを利用しています。
See the Pen GSAP JS: multiple text-shadow : hover by GreenSock (@GreenSock) on CodePen.
ほんのりとドロップシャドウを利用した、質感高いテキストエフェクトのひとつで、シンボル記号をローテーション回転させ利用しています。
See the Pen The Correct Pronounciation by Daniel Burrows (@danburrows) on CodePen.
こちらも複数のtext-shadowプロパティ値を設定することで、リアルな影を表現しています。
See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.
レトロなタイポグラフィエフェクト、クロムとネオンスタイルを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.
文字テキストにストライプパターンを重ね、ナビメニューをマウスホバーで伸縮するアニメーションも実装されています。
See the Pen New header design by Johan van Tongeren (@Dreamdealer) on CodePen.
CSSのmask-imageプロパティを利用することで、文字テキストにテクスチャを重ねることができます。
See the Pen Easy Textures with CSS Masks by Jeremy Frank (@jeremyfrank) on CodePen.
こちらもmask-imageプロパティを利用し、テキスト用ドロップシャドウを、ストライプ柄で表現しています。
See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.
background-clipプロパティを利用することで、背景イメージ写真の表示させたい部分のみクリッピングすることができます。
See the Pen Knockout Text in CSS by Crisman Noble (@crismanNoble) on CodePen.
文字テキストが絶えずブルブルと震える、ユニークなアニメーションエフェクト。
See the Pen JS/CSS3 Jittery text effect. by ZeroSpree (@zerospree) on CodePen.
スタイルシートのみで作成し、タイポグラフィ・ポスターのようなデザインに仕上げます。
See the Pen CSS3 Typography by Nate Scott (@natewscott) on CodePen.
ウェブフォントをつかって、さまざまなエフェクトを実験しているテキストエフェクト。
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.
text-shadowプロパティを重ねて適用することで、立体的なデザインを演出できます。
See the Pen 3D text effect by Brian Guerrero (@brian-guerrero) on CodePen.
keyframeアニメーションを利用することで、ピカピカと点滅する文字テキストを完成させます。
See the Pen CSS Text-FX by moklick (@moklick) on CodePen.
映画のオープニングシーンを見ているような気分にさせる、ぼかしエフェクトが美しいデザイン。
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個まとめ
以前まとめたエントリーで、今回未紹介のエフェクトを中心に揃えています。
参照元リンク : Beautiful Examples of CSS3 Typography Code Snippets – Marketblog Envato
