Recently I have been learning how to design better webpage elements. It is still mostly CSS stuff. CSS is the thing that has been around for so long and I have worked with it so many times, but not in a serious sense. But now I would really like to dive deeper and step up my CSS game.
Quoting directly from developer.mozilla.org:
/* Keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; /* Rules */ Specify a single box-shadow using: - Two, three, or four <length> values. - If only two values are given, they are interpreted as <offset-x><offset-y> values. - If a third value is given, it is interpreted as a <blur-radius>. - If a fourth value is given, it is interpreted as a <spread-radius>. - Optionally, the inset keyword. - Optionally, a <color> value. To specify multiple shadows, provide a comma-separated list of shadows.
Transformed into examples:
Examples of a Nice Shadow
Okay, tbh these examples from Mozilla are outright random and ugly. Let’s make some better ones:
The reason these shadows are much better is because they look more realistic; more subtle and blurred, which really lifts up the element from the paper. Actually these two examples are taken from Tailwind CSS(which is a very good, utility-first css library) with some slight modifications. The basic ingredients in making the second realistic box-shadow here are:
- a slightly opaque black = rgba(0, 0, 0, 0.1)
- a high blur radius = 25px
- a negative spread = -5px
- a downward offset
If you have these 3 elements in place, at least your shadow would look good, like this:
But if you compare this back to the previous example, you will notice there is an extra layer of shadow (0 10px 10px -5px rgba(0, 0, 0, 0.04)) being applied. This extra layer is a more compact one and is even dimmer. It looks like this on its own:
By combining the base shadow with this smaller and dimmer shadow, you get an even better look from the base shadow as the closer area to the box gets a little bit more darker, which adds some more realism to the feel of it.
Actually, beside being used as a shadow to boost the feel of material design, box-shadow can be used to add extra background layers to your images.