Question 45550 in CSS Question posted in
Some basic documentation can be found here.

CSS shadow such that some div's look they are behind

Currently I have a HTML & CSS that results in a page like below

enter image description here

However, I want the shadows above B & C tabs so that it looks like they are behind.
Can anyone hele achieve this?

enter image description here

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>
Tags:

3

Answers


  1. 0

    Just add these to your content and tab css classes:

       .content {
      position: relative;
      z-index: 2;
    }

   .tab 
      z-index: 1;
    }

    Edit: you need the relative positioning for z-index to work.

    Login or Signup to reply.
  2. 0

    You can always try the following css witch will give the box the black shadow and the border bottom you want.

    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;
    Login or Signup to reply.
  3. 0

    You need to temper with the z-index of the different elements. Remember you can only modify the z-index if the element itself has a position set (e.g. position: relative)

    Below is a working example. Note that I have also added an "active" class to the currently active tab.

    You would need to create JavaScript to make it full functional, but this is the starting point.

    Good 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search