Tips for designing box-shadows that mimic varying levels of depth

Question

Tips for designing box-shadows that mimic varying levels of depth

Imagine creating a design with two different layers of objects set against a background. The first layer should consist of objects casting large shadows, while the second layer should have smaller shadows.

But what happens when an object from the front layer overlaps one in the second? In that case, the overlapping object should cast a large shadow on the background but a smaller shadow on the second-layer object.

Check out this example:

https://i.sstatic.net/YgskJ.png

Is it possible to achieve this effect using CSS or perhaps SVG filters? Any creative ideas?

html css shadow box-shadow

Answer 1

Answer №1

Enhance a shadow effect using a pseudo element:

div {
  height: 150px;
  padding-top: 50px;
  margin: 3em;
  width: 300px;
  box-shadow: 2px 2px 5px;
}
p {
  margin: 2em;
  position: relative;
  box-shadow: 2px 2px 5px;
  height: 50px;
  width: 500px;
  background: white;
}
p:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 265px;/* set offset value accordingly */
  box-shadow: 5px 5px 5px #333;
  pointer-events:none; /* avoids interaction, negative z-index can be used as well */
}

<div>
  <p>
  </p>
</div>

Adjust size, margin, and padding with actual content for accurate display :)

Answer 2

Enhance a shadow effect using a pseudo element:

div {
  height: 150px;
  padding-top: 50px;
  margin: 3em;
  width: 300px;
  box-shadow: 2px 2px 5px;
}
p {
  margin: 2em;
  position: relative;
  box-shadow: 2px 2px 5px;
  height: 50px;
  width: 500px;
  background: white;
}
p:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 265px;/* set offset value accordingly */
  box-shadow: 5px 5px 5px #333;
  pointer-events:none; /* avoids interaction, negative z-index can be used as well */
}

<div>
  <p>
  </p>
</div>

Adjust size, margin, and padding with actual content for accurate display :)

Tips for designing box-shadows that mimic varying levels of depth

Answer №1

Similar questions

I'm curious if there is a specific regex pattern that can be used for validating custom page ranges in JavaScript

Linking jQuery UI tabs to tabs on a different pageWould you like assistance

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration

Switch out HTML tags depending on attribute content

Input tag styled in a center-aligned word document format

Tips for highlighting the final word in the headline using an underline

Revise the content within the table cell

What is the best way to design a trapezoid-shaped div with perfectly centered text?

Dynamically instantiate a new JavaScript object from an existing class by using input from the DOM

I'm puzzled as to why the '>' combinator is not functioning the way I anticipated. It seems I must now style elements individually instead of being able to style them together as I originally thought

Creating a component that surpasses all others

Is it possible to extract data from a table by adjusting Javascript in the inspector tool? The page is only showing today's data, but I'm interested in retrieving historical data by going back

Guide for creating a scroll-triggered rotation animation using only JavaScript

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

How to rotate text direction using JavaScript and CSS

Tips for creating a responsive website header

What is the best way to manage the changing selection in a drop-down list?

What are the HTML5 elements that include the "load event" within their onload attribute?

associating the highlighted text with a specific attribute of the selectbox

"Efficiently handle multiple instances of the same name using AJAX, JavaScript