In the last 3 posts, we looked at CSS Shadows, using text-shadow, box-shadow and filter: drop-shadow(). Now let’s take a look at a few of the great things you can use them for, for extra creativity, and design ideas.
For start, here are a bunch of box-shadow examples you can easily use:
See the Pen box-shadow examples by Lurx (@lurx) on CodePen.
Using box-shadow, we can add multiple shadows to create the visual of multiple borders to our element:
See the Pen Box-shadow: multiple borders by Lurx (@lurx) on CodePen.
Here are a few great things you can do with smart usages of text-shadow, box-shadow and filter: drop-shadow():
Squishy Toggle Buttons (by Justin Windle)
See the Pen Squishy Toggle Buttons by Justin Windle (@soulwire) on CodePen.
Long Shadow Gradient (by roikles)
See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.
Shade – Shadow mixin (by Hugo DarbyBrown)
See the Pen Shade – Shadow Mixin by Hugo DarbyBrown (@hugo) on CodePen.
Curved box shadow (by Julio Corpus)
See the Pen Shadow by Julio Corpus (@jcorpus) on CodePen.
Animated text-shadow (by carpe numidium)
See the Pen [webkit] Animated “text-shadow” pattern by carpe numidium (@carpenumidium) on CodePen.
3D Text effects (by Chris Eisenbraun)
See the Pen CSS Text Shadow by Chris Eisenbraun (@chriseisenbraun) on CodePen.
3D Layers (by Naser Hassani)
See the Pen Nar Sang by Naser Hassani (@snhasani) on CodePen.
Seconds Counter (by Martin Grand)
See the Pen seconds counter by Martin Grand (@martingrand) on CodePen.
Animated pattern (by yoksel)
See the Pen Just playing with ShadowPainter by yoksel (@yoksel) on CodePen.
Rainbow circle (by Colin McClure)
See the Pen Rainbow Circle by Colin McClure (@colin) on CodePen.
3D Text (by Me)
See the Pen 3D Text with text-shadow by Lurx (@lurx) on CodePen.
You could use :before and :after, and with a little hard work, you could create something like this:
See the Pen 8-bit art by Lurx (@lurx) on CodePen.
And, with a little us of SASS functions, box-shadow can be used to create 8-bit style characters:
See the Pen CSS Daily Images: Monsters week! by Lurx (@lurx) on CodePen.
I hope these posts helped your knowledge and inspiration. Thanks for reading!