Improve your web interface by creating depth

Creating depth in web design is essential for making your website visually appealing and engaging. Depth adds a sense of realism and hierarchy to your web pages, guiding users through content and highlighting important elements. One way to achieve depth in web design is by using shadows, but there are several other techniques as well.

Shadows

Shadows can be used to simulate the way objects cast shadows in the real world. They create a visual distinction between elements on your web page. Common shadow types include drop shadows (a shadow below an element), text shadows (shadows behind text), and box shadows (shadows around boxes or containers). By controlling the intensity and direction of shadows, you can make elements appear to float above or sit below others, thus creating a sense of depth.

I have written a blog about this here; you can find out more

Creating depth with color

When most people talk about “flat design”, they mean designing without shadows, gradients, or any other effects that try to mimic how light interacts with things in the real world. But with colors, we can have a deep design

In general (especially with shades of the same color), lighter objects feel closer to us, and darker objects feel further away.

Make an element lighter than the background color to make it feel like it’s raised off of the page, or darker than the background color if you want it to feel inset like a well

In the example above, we use grey colors with different shades to create depth in our design

Overlap elements to create layers

One of the most effective ways to create depth is to overlap different elements to make it feel like a design has multiple layers.

For example, instead of containing a card entirely within another element, offset it so it crosses the transition between two different backgrounds

Overlapping elements with CSS

We already know the purpose of using overlapping techniques, but how can we mimic this behavior on the web?

Negative margin

<div class="example">
  <h2>Two DIVs</h2>
  <div class="first"></div>
  <div class="second">
    I should overlap the thing above me
  </div>
</div>

.first {
  height:200px;
  width:50%;
  margin: 0 auto 0;
}
.second {
   height:200px;
   width:50%;
   margin: -80px auto 0;
}

Translate using transform

In this example, we have two div elements, "box1" and "box2," and we use the transform property with the translate function to move them. The translate(20px, 20px) on "box1" moves it 20 pixels to the right and 20 pixels down from its original position. The translate(40px, 40px) on "box2" moves it 40 pixels to the right and 40 pixels down from its original position. As a result, "box2" overlaps "box1."

.box1 {
  width: 100px;
  height: 100px;
  background-color: #ff5733;
  transform: translate(20px, 20px);
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: #33ff57;
  transform: translate(40px, 40px);
}

Absolute positioning

.container {
  position: relative; /* Establishes the containing block for absolute positioning */
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.box {
  position: absolute; /* Set both boxes to have an absolute position */
  width: 100px;
  height: 100px;
  top: 20px;
  left: 20px;
  background-color: #f00;
}

Grid

CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web.

img {
 /* Note: because we don't specify the width of an image here , so it
 will take the original width of an image and try to fit all of the 
 columns space in grid */
}

In this article, we discuss the importance of creating depth in web design to make websites visually appealing and engaging. We explore various techniques to achieve depth, such as using shadows, manipulating colors, overlapping elements, and implementing CSS techniques like negative margin, transform, absolute positioning and grid