Box Shadows on Multiple Elements at Same Level But Without Overlap

box shadows on multiple elements at same level but without overlap?

If you can use filter and drop-shadow then you can apply a drop-shadow to the container. This shadow differs as it conforms to the alpha channel of the image (in this case, the outline of the content) instead of a simple rectangle:

body {

  background: darkgrey;

  padding-top: 50px

}

#box-one,

#box-two {

  background: white;

  width: 200px;

  height: 200px;

  margin: auto;

  position: relative;

}

#box-one {

  left: -50px;

  z-index: 1;

}

#box-two {

  right: -50px;

  z-index: 1;

}

#top {

  filter: drop-shadow(0 0 20px black);

}

<div id="top">

  <div id="box-one"></div>

  <div id="box-two"></div>

</div>

How do I apply box shadow to adjacent elements without the appearance of overlapping?

Try something like this -

HTML

<div id="admin_login">
  <form>
    <input type="text"/>
    <input type="text"/>
  </form>
  <div class="login-btn"><a href="#">Login</a></div>
</div>

CSS

#admin_login form {
  background: #464950;
  padding: 5px;
  box-shadow: #000 2px 2px 10px;
  border-bottom-right-radius: 10px;
  margin-bottom:3px;
}

#admin_login input {
  display: block;
  border: none;
  margin: 6px 4px;
  padding: 4px;
}

#admin_login a {
  color: inherit;
  background: #464950;
  padding: 4px 8px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: #000 2px 2px 10px;
  text-decoration: none;
}
#admin_login .login-btn {
    height: 30px;
    margin: -3px 0 0 -4px;
    overflow: hidden;
    padding: 0 0 0 4px;
}

Basically just wrapping the link inside a div, setting the div to overflow hidden, and position it in the correct place.

You'll also need to make sure the link is on a layer above the form.

How to have two elements share a box shadow

You can use css-filter:

#box {
  filter: drop-shadow(0 0 5px black)
}

Box-shadow is overlapping other elements, how can I fix it?

This could be a way. Split your shadow boxes from your timers, so you can use z-index to put them behind the timers.

.timer-container {

  font-size: 0;

  position: relative;

}

.timer-container .timer {

  font-size: 16px;

  width: 110px;

  height: 170px;

  display: inline-block;

  background-color: #ffffff;

  color: red;

  margin: 0 5px;

}

.timer-container .time {

  height: 120px;

  font: 4em serif;

  border-bottom: 1px solid #bdd9f6;

  padding: 15px 0 0;

}

.timer-container .label {

  height: 50px;

  font: 1.125em serif;

  text-transform: uppercase;

}

.timer-shadow {

  position: absolute;

  left: 0;

  top: 0;

  z-index:-1;

}

.timer-shadow span {

  margin: 0 5px;

  display: inline-block;

  -webkit-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);

  -moz-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);

  box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2);

  width: 110px;

  height: 170px;

}

<div class="timer-container">

  <div class="timer" style="z-index:4;">

    <div class="time">

      <span>12</span>

    </div>

    <div class="label" style="z-index:3;">

      <span>jours</span>

    </div>

  </div>

  <div class="timer" style="z-index:2;">

    <div class="time">

      <span>17</span>

    </div>

    <div class="label">

      <span>heures</span>

    </div>

  </div>

  <div class="timer" style="z-index:1;">

    <div class="time">

      <span>48</span>

    </div>

    <div class="label">

      <span>minutes</span>

    </div>

  </div>

  <div class="timer">

    <div class="time">

      <span>05</span>

    </div>

    <div class="label">

      <span>secondes</span>

    </div>

  </div>

  <div class="timer-shadow">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

  </div>

</div>

Why doesn't my box-shadow overlap correctly on these flex children?

I can't figure out why all these manipulations with z-index? The blocks are already in the correct order. But, as long as you have a transparent #header, the shadow of #main-nav will be visible. So just add a background color for the #header:

* {
  margin: 0;
}

#main-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
}

.main-container-right {
  position: relative;
  width: 100%;
  height: 800px;
}

#main-nav {
  position: sticky;
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 800px;
  border: 1px solid #c4c4c4;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 10px 10px #0004;
}

#header {
  position: sticky;
  display: flex;
  height: 30px;
  width: 100%;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 4px #0004;
}

<div id="main-container">
  <nav id="main-nav">
  </nav>
  <div class="main-container-right">
    <header id="header">
    </header>
  </div>
</div>

Creating a CSS3 box-shadow on all sides but one

In your sample create a div inside #content with this style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

and change #content style (remove paddings) and add shadow

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

add shadows to tabs:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

---

Related Topics