Comprehend shadow formation

By defining shadow, we can make it look like there's a shadow under the box. Just like when the sun shines through an object and makes a shadow on the ground

Shadows can come with a lot of benefits and we can enhance them to take our design to the next level

Depth and Dimension: Shadows can add depth and dimension to elements on the web page, making them appear to float above or below other elements.Making it easy to understand the layout and relationship between elements
Visual Feedback: Shadows can provide visual feedback when users interact with elements. For example, when a button is clicked or hovered over, adding a subtle shadow effect can give the user the impression that the button is being pressed or is interactive.
Highlighting and Emphasis: Shadows can be used to highlight and emphasize certain elements, such as buttons, cards, or text. By adding shadows, you can draw attention to specific areas of a webpage or make important information stand out.
Readability: Text shadows, in particular, can improve the readability of text by providing a visual contrast between the text and its background. This can be especially useful when dealing with text placed on images or backgrounds with varying colors

Text-shadow

textShadowColor:"red"
textShadowOffset: { width: -2, height:-2} (offsetX,offSetY)
textShadowRadius

text-shadow:color offsetX offsetY blur;
/** color : define the color of the shadow
    offsetX : sets the horizontal position of the shadow
    offsetY : sets the vertical position of the shadow
    blur : sets the radius or extent of the shadow

Let's have a look at the GIF

Add a text-shadow

There are several good uses of text-shadow, and one of them is to use it in the context of background images. To find out what a background image is, you can click here

Another example

We can enhance its visual look by applying text-shadow property

article p{
  text-shadow:2px 2px 4px white;
}

Box-shadow

box-shadow : color offsetX offsetY blur spread inset;
/** color offsetX offsetY blur is the same as text-shadow
spread : property controls the size of the shadow's spread or blur
inset :   
The inset keyword creates an interior shadow and the offset values 
are opposite of what they would be for exterior shadows. **/
box-shadow: black 5px 5px inset;
/** it will create a shadow from top left(opposite to exterior shadows)

A full demonstration with GIF

Box-shadow with inset

article {
   box-shadow: 0px 0px 5px black,
               0px 0px 50px 10px rgb(255,130,94),
               5px 5px 50px white inset, (top left)
              -5px -5px 50px white inset; (right bottom)
}

Box shadows from a UX/UI perspective

With good UX/UI, we use shadows to convey elevation. In other words, make our design have depth. In reality, we often see things that have depth.

When light shines through an object, it will leave the object with a shadow, and we can mimic this behavior with the shadow property in CSS

Catch an intention from users

The closer something feels to the users, the more it will attract their focus

Establish an elevation system

Combine shadows with user interactions

Hover Effects:

On hover, you can enhance the shadow effect to create a subtle "lift" or "pop" effect. For example, when a user hovers over a button, you can increase the shadow size or intensity to provide visual feedback.
```
  .button:hover {
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
     transition: box-shadow 0.3s ease;
   }
```

Click and drag:

Shadow can have two parts

Let's break down the terminology

The first shadow is usually larger and softer (umbra), and the second shadow is tighter and darker (penumbra). This is due to the natural behavior of shadows in real-life

Using two shadows can give us a lot more control than what we get with a single shadow , I recommend using double shadows for more precise UX/UI, and we can also establish an elevation system for our design

In this article, we explore the benefits of using shadows in web design, including adding depth, dimension, visual feedback, and emphasis to elements. We discuss the properties of text-shadow and box-shadow, and how they can improve readability and enhance visuals. Furthermore, we delve into UX/UI considerations for shadows, such as establishing an elevation system and combining shadows with user interactions for a more engaging experience.

Understand shadows

Comprehending shadows and their nature

Table of contents