Importance of Shadows
Over the years, many developers implemented the effects of flat design and shadows into their products by choosing one after the other. In the recent years, it has been concluded that using shadows has been more beneficial due to depth and better usability. As such, after an era of 100% flat design, using shadows in UI design has been the standard method.
Using Shadows Well
Now just because using shadows on web design looks useful does not mean we always have to use them. We only use shadows if they match with our website personality. For example, if our website has a very serious or elegant personality, we would most likely not use shadows. On the other hand, if it has a playful or fun personality, we would use more shadows to convey that feeling. Following rules like these can help us decide whether to use shadows in our design.
When we do use shadows for our design, we need to be careful to not use them too much on every element. It is recommended to use shadows in small doses. This means that we should only use shadows for sections that we think is more important for the users to focus on. Additionally, we need to make sure that we do not make the shoadows too dark. Shadows should look natural to the users and not stand out too much.
Types of Shadows
-
Small Shadows: for smaller elements (image, button, text) that should stand out.
-
Medium-sized Shadows: for larger areas (block, section) that should stand out a bit more.
-
Large Shadows: for elements taht should really float above the interface.
-
Hover Shadows: interaction with changing shadows when hovering a mouse on an element (click and hover).
-
Color Shadows: making the shadows glow with color (colored shadows.
// value1 --> horizontal shadow // value2 --> vertical shadow // value3 --> the level of bluriness // value4 --> scaling the shadow (OPTIONAL) // color --> color of the shadow box-shadow: <value1> <value2> <value3> <value4> <color>;
// value1 --> horizontal shadow // value2 --> vertical shadow // value3 --> the level of bluriness // color --> color of the shadow text-shadow: <value1> <value2> <value3> <color>;
