CODEWITHSUNDEEP
htmlcssbox-shadow
spencer.sm
spencer.sm

Reputation: 20544

Eliminate the box shadow between two adjacent elements of different widths

I'm trying to put a CSS box-shadow around two divs of different widths and somehow hide the overlapped shadow in the middle for a seamless look like the image on the right below.

enter image description hereenter image description here

I've tried adding a white border on the first element and having it expand over the second but the border appears inside the box-shadow. I've also tried putting a box-shadow on the container but it makes the shadow square which isn't what I'm looking for. Is there some way to get this effect?

My attempt: http://jsfiddle.net/1vy2q4L0/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
div {
  font-family: 'Open Sans';
  background-color: ;
  display: inline-block;
  float: left;
  padding: 10px;
  padding-bottom: 0px;
  box-shadow: 0px 0px 3px 0px black;
}
ul {
  list-style-type: none;
  margin: 0px;
  padding: 10px;
}
li {
  margin-bottom: 10px;
}
a {
  color: black;
  text-decoration: none;
}
.menu-sub {
  clear: both;
  padding: 0px;
}
.container {
  margin: 25px;
  box-shadow: none;
}
<div class="container">
  <div class="menu-top">Research</div>
  <div class="menu-sub">
    <ul>
      <li><a href="#">Research Services</a></li>
      <li><a href="#">Research Portfolio</a></li>
      <li><a href="#">Map of Current Projects</a></li>
    </ul>
  </div>
</div>

Upvotes: 2

Views: 827

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272106

I have a simple solution. The CSS is explained inside comments.

/*
 * reset
 */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*
 * float to shrink-wrap
 * position relative to make z-index work
 * z-index to force the white background + border in "front" of sub menu
 * background + border bottom to cover the box shadow of menu and sub menu
 * negative margin to reclaim the space occupied by the border
 */
.menu-top {
  float: left;
  box-shadow: 0 0 3px black;
}
.menu-top span {
  display: block;
  position: relative;
  z-index: 1;
  background-color: white;
  border-bottom: 5px solid white;
  margin-bottom: -5px;
  padding: 10px;
}

/*
 * clear to force new line
 */
.menu-sub {
  float: left;
  clear: left;
  box-shadow: 0 0 3px black;
}
.menu-sub ul {
  padding: 10px;
}
<div class="container">
  <div class="menu-top"><span>Research</span></div>
  <div class="menu-sub">
    <ul>
      <li><a href="#">Research Services</a></li>
      <li><a href="#">Research Portfolio</a></li>
      <li><a href="#">Map of Current Projects</a></li>
    </ul>
  </div>
</div>

Upvotes: 6

Related Questions