CODEWITHSUNDEEP
cssbox-shadow
Bujji
Bujji

Reputation: 1727

CSS Box shadow overlay previous div shadow

In the below example for the first box , I have given box shadow to the outer Div and it looks nice . Can I get the similar kind of look by giving the shadow to the inner Divs( In the 2nd box ) ? This I needed because if I click on any inner Divs I want to separate that Div from the rest of the Divs like shown in the third Box . Thank You 

.my-shadow {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
  box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}

.my-inner-div {
  padding:20px;
}

.my-shadow2 {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
 
}

.my-inner-div2 {
  padding:20px;
   box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}
        <div style="float:left;margin-left:30px; ">
    <h1> First  </h1>
    
    <div class="my-shadow ">
      
      <div class="my-inner-div">
        This is test1
      </div>
      
      <div class="my-inner-div">
        This is test2
      </div>
      <div class="my-inner-div">
        This is test3
      </div>
      <div class="my-inner-div">
        This is test4
      </div>
      <div class="my-inner-div">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Second  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Thrid  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2" style="margin:20px">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>

Upvotes: 2

Views: 285

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

You can use the shadow on a pseudo element that you put below the div and you won't have any issue:

.my-inner-div {
  padding: 20px;
}

.my-shadow2 {
  width: 500px;
  margin: auto;
  margin-top: 50px;
  position:relative;
  z-index:0; /*to avoid side effect of stacking context, we make sure everything belong inside this div*/
}

.my-inner-div2 {
  padding: 20px;
  position:relative;
  background:#fff;
  transition:1s all;
}
.my-inner-div2:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  box-shadow: 
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.my-inner-div2:hover {
  margin:20px;
}
<div class="my-shadow2 ">

    <div class="my-inner-div2">
      This is test1
    </div>

    <div class="my-inner-div2">
      This is test2
    </div>
    <div class="my-inner-div2">
      This is test3
    </div>
    <div class="my-inner-div2">
      This is test4
    </div>
    <div class="my-inner-div2">
      This is test5
    </div>

  </div>

Upvotes: 2

Toby
Toby

Reputation: 13385

The divs are transparent, so they show the entire box shadow around them. I've added a white background in the snippet below.

You can still see a slight drop shadow at the top, this is because each subsequent div overlays the div before it. I'd recommend using a lighter box-shadow, or moving it down a few pixels so it's less visible, then moving it for the selected div as part of the highlight styling.

.my-shadow {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
  box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}

.my-inner-div {
  padding:20px;
}

.my-shadow2 {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
 
}

.my-inner-div2 {
  padding:20px;
   box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important;
   background: #fff;
}
        <div style="float:left;margin-left:30px; ">
    <h1> First  </h1>
    
    <div class="my-shadow ">
      
      <div class="my-inner-div">
        This is test1
      </div>
      
      <div class="my-inner-div">
        This is test2
      </div>
      <div class="my-inner-div">
        This is test3
      </div>
      <div class="my-inner-div">
        This is test4
      </div>
      <div class="my-inner-div">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Second  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Thrid  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2" style="margin:20px">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>

Upvotes: 1

Related Questions