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.
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.
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.
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
✨ 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
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.