I think it even might be a series! You know, X cool things you can do with Y. Might be fun! And it also looks like something both: interesting and easy-enough to write, so I won’t start and ditch it after a while. Maybe!
So, ladies and gentlemen! Our first guest is box-shadow. Let’s welcome them to the stage!
1. 3D-like buttons
That one is kinda obvious and popular. But still, it’s cool! There are different approaches to “3D-like buttons” but this one allows for various backgrounds. You can use solid color, or gradients, or images, or mix of those — doesn’t matter. The “shadow” applies to inside of the element and shows “between” the text and the background of it.
See the Pen 3D-like Button by Yzoja (@Yzoja) on CodePen.
2. Neomorphism
One of the newest trends when it comes to CSS and Web Design. Works well with a dark and light background (just can’t be totally white or totally white) and it’s… cute? It’s subtle and modern. Gives you the feeling of layers, without heavy-ish usual shadows.
See the Pen eYzZPEd by Yzoja (@Yzoja) on CodePen.
3. Product / Blog Post Cards
I remember a few years back when someone asked: “how to achieve a shadow, that’s not strictly under the element”. Meaning, it’s narrower than the box itself. With box-shadow and negative fourth value, it works like a charm! Just take a look.
See the Pen Box-shadow’s use in post cards by Yzoja (@Yzoja) on CodePen.
4. Overlay
There are at least a few ideas to achieve almost the same thing. While the usual approach might be with linear-gradient, I like to do it with box-shadow. There is a bit more… flexibility?
With shadow applied to :before we can even use mix-blend-mode and other fun stuff! The shadow also is not as straight, as it would be when using linear-gradient.
See the Pen Gallery caption box-shadow by Yzoja (@Yzoja) on CodePen.
✨ Gradient “box-shadow” effect
That’s not exactly “box-shadow”. I mean, it is and it isn’t at the same time. It’s a shadow applied to a box, but I’m not using the box-shadow property.
I think it’s cute, and the fact, that it’s using just :after and doesn’t need anything in the markup, is definitely a plus.
See the Pen Gradient “box-shadow” by Yzoja (@Yzoja) on CodePen.