Create a CSS shadow effect that gives the illusion of some divs appearing to be positioned behind others

At present, I have designed an HTML & CSS layout that produces a page similar to the image below:

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

However, I am aiming to create shadows above the B & C tabs to give them a layered appearance. Could someone help me accomplish this effect?

https://i.sstatic.net/6Sslt.png

body {
  background-color: rgb(245, 165, 61);
  --border-rad: 5px;
}

.wrapper {
  width: 80vh;
  margin: 5%;
}
.tabs {
  display: flex;
  justify-content: space-around;
}

.tab {
  width: 20%;
  color: #000;
  background-color: #fff;
  margin: 2px 2px 0% 2px;
  border-top-left-radius: var(--border-rad);
  border-top-right-radius: var(--border-rad);
  position: relative;
  text-decoration: none;
  text-align: center;
}

.tab:before,
.tab:after {
  content: "";
  position: absolute;

  height: 10px;
  width: 20px;

  bottom: 0;
}

.tab:before {
  left: -20px;
  border-radius: 0 0 var(--border-rad) 0;
  box-shadow: var(--border-rad) 0 0 0 #fff;
}

.tab:after {
  right: -20px;
  border-radius: 0 0 0 var(--border-rad);
  box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}

.content {
  background-color: #fff;
  height: 75vh;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  text-align: center;
}
<div class="wrapper">
      <div class="tabs">
        <span class="tab">A</span>
        <span class="tab">B</span>
        <span class="tab">C</span>
      </div>
      <div class="content">content</div>
</div>

htmlcss

Answer №1

To adjust the stacking order of elements, you must manipulate the z-index property. Keep in mind that z-index can only be modified if the element has a position set (e.g. position: relative).

Here is a demonstration of how it works. I have also included an "active" class for the currently active tab.

You will need to incorporate JavaScript to make it fully functional, but this serves as a starting point.

Best of luck!

body {
  background-color: rgb(245, 165, 61);
  --border-rad: 5px;
}

.wrapper {
  width: 80vh;
  margin: 5%;
}
.tabs {
  display: flex;
  justify-content: space-around;
}

.tab {
  position: relative;
  width: 20%;
  color: #000;
  background-color: #fff;
  margin: 2px 2px 0% 2px;
  border-top-left-radius: var(--border-rad);
  border-top-right-radius: var(--border-rad);
  position: relative;
  text-decoration: none;
  text-align: center;
}

.tab.active {
  z-index: 2;
}

.tab:before,
.tab:after {
  content: "";
  position: absolute;

  height: 10px;
  width: 20px;

  bottom: 0;
}

.tab:before {
  left: -20px;
  border-radius: 0 0 var(--border-rad) 0;
  box-shadow: var(--border-rad) 0 0 0 #fff;
}

.tab:after {
  right: -20px;
  border-radius: 0 0 0 var(--border-rad);
  box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}

.content {
  position: relative;
  z-index: 1;
  background-color: #fff;
  height: 75vh;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  text-align: center;
}
<div class="wrapper">
      <div class="tabs">
        <span class="tab active">A</span>
        <span class="tab">B</span>
        <span class="tab">C</span>
      </div>
      <div class="content">content</div>
</div>

Answer №2

To incorporate these changes, insert the following styles into your HTML code for the designated classes content and tab:

   .content {
      position: absolute;
      z-index: 3;
    }

   .tab {
      z-index: 2;
    }

Note: It is important to include the absolute positioning in order for z-index to take effect.

Answer №3

If you're looking to add some style to your box, consider using the following CSS code to create a sleek black shadow and a defined border bottom.

box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 5%) 0px -3px 5px;
border-bottom: solid;
border-width: thin;
z-index: 50;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue I'm facing with my CSS is that the Doctype is causing some styles to

Hey there! I've been pondering the use of !DOCTYPE html lately. I recently put together a basic webpage that looked great on most browsers except for IE. After doing some digging, it was recommended to me to use !DOCTYPE html. However, this ended up ...

htmlcssasp-classic

What is the best way to emphasize searched queries on a Django template's result page?

In my views.py file, I have the following search query: class SearchView(View): def get(self, request, *args, **kwargs): queryset = BlogPost.objects.all() query = request.GET.get('q') if query: queryset = ...

pythoncssdjango

dynamically inserting new data fields and calculating cumulative total

I'm looking to find a way to calculate the total sum of dynamically added fields and have the result displayed on the page. However, I seem to have hit a roadblock along the way. Here is the code that I'm currently examining and trying to unders ...

javascriptjqueryhtmlbootstrap-4

Creating intricate HTML divs dynamically using JavaScript

I am currently facing an issue with appending divs to an element in my HTML. The problem arises from an icon embedded in one of the div attributes, and it seems to be causing a syntax error. When I append the div, the formatting is incorrect and the HTML c ...

javascriptjqueryhtml

Struggling to grasp the concept of fit-content? Let me

For my personal project, I am creating a simple react webpage. To incorporate zoom capabilities, I decided to use the library called React-zoom-pan-pinch. Initially, without implementing this library, my SVG element filled the screen in red, which was the ...

htmlcssreactjssvg

I am having trouble with the Primeng password template suggestions not appearing as expected

The demonstration available at this link is not functioning correctly, unlike the example provided in the documentation at this website. In the StackBlitz demo, the suggestions are not being displayed as expected for the password template. Take a look at ...

htmlangulartypescriptprimeng

What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome. Here is the HTML code: <div> <img src='some broken url' alt='no image'& ...

htmlcss

What is the process for modifying the design of an NPM package?

I may have a silly or incorrect question, but what exactly is the extent of default styling in an NPM package? If I am using an NPM package and wish to adjust the color of one of their elements, how should I go about it? In both my own index.css file and ...

cssreactjsnpm

Styling Challenge: Making the button inside a form match the design of the button outside the form

I have noticed that the button inside a form has a lot more padding around it compared to the one outside of the form. I am trying to adjust the within-form button so that it matches the padding of the without-form button. HTML/PHP <?php if (! ...

htmlcssforms

Acquiring the output value from the cs function using Javascript

I've hit a roadblock in my coding journey while trying to display a message to the user indicating that their data has been saved. I have a C# function that runs an SQL procedure and returns a value. Here's the C# function: Sql p = new Sql( ...

javascriptc#jqueryhtml

How can you prevent HTML from interpreting the characters '<' and '>'?

I am adding some content through JavaScript using innerHTML in a label, but nothing is showing up. I am retrieving data from an API response. { "answer_a": "<footer>", "answer_b": "<section>", ...

javascripthtmldictionary

What steps can be taken to ensure that the scale() function is given the highest priority

Trying to develop a program that generates a canvas graph based on some calculated data. To adjust for larger numbers, I attempted to scale the graph using ctx.scale();. However, every time I do this, the canvas goes blank! I even tried scaling the canvas ...

javascriptandroidhtmlcanvasscaling

What is the best way to only load a specific div from another webpage onto my own webpage without loading the entire page?

I am currently working with two webpages named internal.html and external.html Within internal.html, I have the following code snippet that loads external.html into a div with the id "result": <script src="http://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtml

Divide material-ui toolbar into separate left and right sections

Is there a way to split the material-ui toolbar into a left and right part? I want to display the numSelected on the left side of the toolbar, and the delete button and edit button on the right side. Currently, my output shows these buttons just beside t ...

javascripthtmlreactjsmaterial-ui

Ways to adjust the size of a container to perfectly match the width of its child elements

My challenge involves two squares in a container that overlap using transform: translate. I am seeking to eliminate the padding to the right of the blue square so that the container perfectly accommodates the width of the children. View the image for clari ...

htmlcss

Is the ng bootstrap modal within Angular failing to show up on the screen

In the midst of working on my project, I encountered an issue with opening a modal using ng bootstrap. Although I found a similar thread discussing this problem, it did not include bootstrap css. I decided to reference this example in hopes of resolving t ...

cssangularng-bootstrap

Creating a dynamic carousel with adjustable images

My image carousel is giving me trouble with responsiveness, specifically the height of the images. While the width looks okay, the height is only half of what I need. Can someone offer some ideas on how to make my image height 100% responsive? I've tr ...

htmlcsstwitter-bootstrap

Tips for displaying data by using the append() function when the page is scrolled to the bottom

How can I use the append() function to display data when scrolling to the bottom of the page? Initially, when you load the page index.php, it will display 88888 and more br tags When you scroll to the bottom of the page, I want to show 88888 and more br ...

javascriptphpjqueryhtmlcss

Is it possible to create and view HTML files in Objective C through user interaction?

I am currently working on developing an iOS app that enables users to create an unlimited number of HTML documents and save them within the app's documents folder. It's somewhat of a combination question, but how can I showcase a file that is sto ...

htmlobjective-cios

Tips for anchoring a row to the bottom of a Bootstrap webpage

After working with bootstrap, I am looking to position the last row of the page at the bottom in a fixed and responsive size manner. ...

csshtmlbootstrap-4