少し前まではテキストにドロップシャドウやグロー効果をつけたい場合は、CSSだけで作ると思ったように効果がかけれなかったので画像で作るという方も多かったかと思います。
最近ではCSS3が発展し、色々なことが出来るようになりました。
そこで今回はCSSで作るグローエフェクト/ドロップシャドウ/光彩効果のサンプルソースを15種ご紹介します。
リッチな効果のかけかた、中々参考になります。
ぜひサイトに実装してみてはいかがでしょうか。
目次
グラデーショングローレター(ホバーすると発光)
See the Pen
Gradient Glow Letter by Sathya (@sathyaram)
on CodePen.
グロー効果付きカード(ホバーで外側が発光)
See the Pen
Card Outer GLow Effect by quangdao (@lincohn)
on CodePen.
スキャン風のグロー効果線
See the Pen
Scanning Glow Lines by Keely (@keeann)
on CodePen.
ネオン風グロー効果ソーシャルメディアボタン
See the Pen
Glass effect social media buttons with neon glow by Kevin Miranda (@kevinmiranda)
on CodePen.
ホバーグロー効果グラデーションボタン
See the Pen
Gradient color button with hover glow by Jesper Lauridsen (@justjspr)
on CodePen.
シンプルなグローエフェクト
See the Pen
Glow Effects by Maryam (@maryamali)
on CodePen.
アニメーション付きグラデーショングローエフェクト
See the Pen
The glow 60s edition by Jean-Pierre Barthelemy (@jpbarth)
on CodePen.
アニメーション付きグラデーショングローエフェクト2
See the Pen
Glowing Translucent Marble by Will Boyd (@lonekorean)
on CodePen.
キラリと光るグローエフェクト
See the Pen
glowing stuff by Kellie Kowalski (@scifriday)
on CodePen.
カッコいいシンプルなバックグロウエフェクト
See the Pen
Animated Back Glow by George Hastings (@georgehastings)
on CodePen.
光る電球風グローエフェクト
See the Pen
Lightbulb Glow by Matt Benson (@MattgyverTV)
on CodePen.
CSSマジカルグローエフェクト
See the Pen
CSS Magical Glow Effect by Matt Sorrentino (@msorrentino)
on CodePen.
シンプルなグローエフェクト2
See the Pen
Circles and Stacking by Will Boyd (@lonekorean)
on CodePen.
ネオン風グローエフェクト
See the Pen
Neon Glow by Felix Rilling (@FelixRilling)
on CodePen.
