ELEMENT SHADOW

Customer focus is when designers think through every detail so that the visitor's attention is focused exactly where it matters.

You have probably seen pages where elements have shadows.

But what about several shadows at once? Or a combination of outer and inner shadows?

Shadows create volume and a sense of space.

It is a powerful tool that should be used skillfully.

The box-shadow Property

A shadow gives an element a sense of depth and elevation.

Compare how an element looks without a shadow and with one.

The difference is noticeable, isn't it?

Shadows can be outer or inner, blurred or sharp, single or multilayered.

Of course, all these details are perfectly understood by the designer who creates the layout.

But the developer must accurately reproduce all the layout effects on the page.

So they also need to understand what a shadow consists of and how to recreate it in code.

The box-shadow property sets one or more shadows for an element.

By default, the size of the shadow matches the size of the element, and its color is the same as the color of its text.

Syntax

box-shadow: <x-offset> <y-offset> <blur> <spread> <color>

• x-offset - horizontal offset. A positive value moves the shadow to the right of the block, a negative value to the left. Required.
• y-offset - vertical offset. A positive value moves the shadow downward, a negative value upward. Required.
• blur - blur radius. The larger the value, the more blurred the shadow becomes. Optional.
• spread - spread radius. A positive value increases the size of the shadow, a negative value decreases it. Optional.
• color - shadow color. Any color format can be used. Optional.

Multiple Shadows

You can add several shadows to one element by listing their values separated by commas.

box-shadow: <x-offset> <y-offset> <blur> <spread> <color>,
            <x-offset> <y-offset> <blur> <spread> <color>,
            <x-offset> <y-offset> <blur> <spread> <color>,
            ...

It creates something like a layered cake. The first shadow in the list is placed on top, and the last one is at the very bottom.

In other words, each previous shadow in the list is placed on a higher layer and visually overlaps all the following ones.

This approach makes it possible to create very soft and beautiful shadows.

Here is the code that I used:

<div>
     <div class="shadow2">
          <article class="shadoww2">
               <h1 class="post-title">Lorem ipsum dolor sit amet</h1>
               <p class="post-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas id eius sunt quas eos accusantium! Pariatur alias reiciendis nesciunt fuga repellat aperiam, omnis eligendi. Ut accusantium ea molestias totam eum harum facere adipisci placeat reiciendis, consequatur aut officia non obcaecati dolor quia laboriosam consequuntur odio, sed sint fuga nam.
               </p>
          </article>
     </div>

     <style>
     .shadow2 {
     width: 500px;
     height: 500px;
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     }

     .shadoww2 {
     width: 300px;
     padding: 20px;
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 4px;
     background-color: #fff;
     color: #000;
     font-family: sans-serif;
     line-height: 1.5;
     text-align: center;
     box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
     }

     .post-title,
     .post-text {
     margin: 0 0 15px;
     color: #000;
     }
     </style>
</div>

Inner Shadow

If an outer shadow visually raises an element, then an inner shadow creates a sense of depth by making the element look recessed.

The syntax for declaring an inner shadow is similar to the syntax of a regular shadow, but the first value must be inset.

box-shadow: inset <x-offset> <y-offset> <blur> <spread> <color>

The shadow's offset, blur, and spread happen inside the element and are visually limited by its border.

Here is the code that I used:

<div>
     <div class="shadow3">
          <article class="shadoww3">
               <h1 class="post-title">Lorem ipsum dolor sit amet</h1>
               <p class="post-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas id eius sunt quas eos accusantium! Pariatur alias reiciendis nesciunt fuga repellat aperiam, omnis eligendi. Ut accusantium ea molestias totam eum harum facere adipisci placeat reiciendis, consequatur aut officia non obcaecati dolor quia laboriosam consequuntur odio, sed sint fuga nam.
               </p>
          </article>
     </div>

     <style>
     .shadow3 {
     width: 500px;
     height: 500px;
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     }

     .shadoww3 {
     width: 300px;
     padding: 20px;
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 4px;
     background-color: #fff;
     color: #000;
     font-family: sans-serif;
     line-height: 1.5;
     text-align: center;
     box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.3);
     }

     .post-title,
     .post-text {
     margin: 0 0 15px;
     color: #000;
     }
     </style>
</div>