最近のWEBサイトのトレンドは、シンプルでフラットなデザインかつ、画像を極力使用せずCSSで補完する作りです。
そこで役に立つのがCSSで簡単に作れるテキストシャドウエフェクト。
画像を使わずとも簡単にテキストにシャドウをつけることができ、色とシャドウの度合いを調整することで画像で作ったロゴのようなデザインもあっという間に作ることができます。
そこで本日はCSSで簡単に作ることが出来る、CSSテキストシャドウエフェクトをご紹介します。
ぜひシャドウのかけかたなどを参考にし、自身のデザイン、コーディングに取り入れてみてください。
勾配が強めなカラフルCSSテキストシャドウエフェクト
See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi (@dariocorsi) on CodePen.
ネオン風CSSテキストシャドウエフェクト
See the Pen Neon text-shadow effect by Erik Jung (@erikjung) on CodePen.
NETFLIX風の動くCSSテキストシャドウエフェクト
See the Pen Netflix style text animation with CSS by Nooray Yemon (@yemon) on CodePen.
1960年代アメリカンCSSテキストシャドウエフェクト
See the Pen Groovy CSS Effect by Daniel Gonzalez (@dan10gc) on CodePen.
ふわっと浮き出る3D CSSテキストシャドウエフェクト
See the Pen Fancy text shadow by agathaco (@agathaco) on CodePen.
オシャレなタイポグラフィ風CSSテキストシャドウエフェクト
See the Pen text-shadow by IMarty (@IMarty) on CodePen.
汎用性のあるロゴのようなCSSテキストシャドウエフェクト
See the Pen Pretty shadow by Alex Moore (@MoorLex) on CodePen.
フラットでシンプルなCSSテキストシャドウエフェクト
See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.
マンガのタイトル風3D CSSテキストシャドウエフェクト
See the Pen 3D Cartoon Text w/CSS text-shadow by Fielding Johnston (@fielding) on CodePen.
ふんわりしたカワイイ3D CSSテキストシャドウエフェクト
See the Pen SCSS 3D text mixin by Liam Egan (@shubniggurath) on CodePen.
バウンドアニメーションCSSテキストシャドウエフェクト
See the Pen Animated Text-Shadow by Erin E. Sullivan (@erinesullivan) on CodePen.
ロゴバッジ風CSSテキストシャドウエフェクト
See the Pen Text-Shadow by Mayur Elbhar (@mayurelbhar) on CodePen.
使いやすいノーマルCSSテキストシャドウエフェクト
See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.
4種の暗めのデザインに合うCSSテキストシャドウエフェクト
See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.
ストライプテキストシャドウエフェクト
See the Pen CSS Dashed Shadow by Lucas Bebber (@lbebber) on CodePen.
カーソルの位置によってシャドウが動くCSSテキストフェクト
See the Pen Direction-aware text-shadow by Martin Picod (@mpicod) on CodePen.
