CSS3 Box-Shadow for Overlapping-Like Divs

CSS3 box-shadow for overlapping-like divs

This jsfiddle does what you want.

The way it works is with a main #wrap element that centres the content and creates a coordinate map for the absolutely positioned #main element. It does this because of its position: relative CSS rule. You end up with the following markup:

<div id="wrap">
<header></header>
<div id="main"></div>
</div>

The header is then placed inside of this and given position: relative and a z-index to set it stacking above the #main container.

Finally #main is absolutely positioned below the header. The CSS looks like so:

/* centre content and create coordinate map for absolutely positioned #main */
#wrap {
width: 300px;
margin: 20px auto;
position: relative;
}

header, #main {
background: #fff;

/* rounded corners */
border: 1px solid #211C18;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

/* dropshadows */
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;
}

header {
display: block;
width: 300px;
height: 50px;

/* stack above the #main container */
position: relative;
z-index: 2;
}

#main {
width: 200px;
height: 70px;

/* stack below the header and underlap it...if that's even a word */
position: absolute;
z-index: 1;
top: 40px;
left: 50px;
}

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>

CSS Overlapping shadows

I set the shadow with :after pseudo-element and the content in a normal div.
By doing it this way, I could apply z-index to each elements and make sure that the main content stays over the sahdow

body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}

.box {
height: 250px;
width: 50%;
background-color: red;
border-radius: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;

position:relative; /* ADDED */
}
/* ADDED */
.box:after{
content:"";
display:block;
position:absolute;
left:0;
top:0;
height: 100%;
width: 100%;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
z-index:-1;
}
/* ADDED */
.box > div{
z-index:1;
}
<div class="box">
<div>1</div>
</div>
<div class="box">
<div>2</div>
</div>
<div class="box">
<div>3</div>
</div>

overlap div elements with box-shadow property

thanks.

I managed to solve it here in the SO in Portuguese on here

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>

Overlapping box-shadow with float divs

You need to change the display of the li.child so that the contents of div.content do not escape it.

Add this CSS :

li.child { display: inline-block; }

http://jsfiddle.net/stevendwood/LtZAv/2/

Parent inset box-shadow overlapped by children divs

No, what you're asking can be done quite easily. However, for ease I would advise for using a background-image or a CSS gradient instead of inset box-shadows. You'll have to tweak the CSS a bit to get exactly what you wanted. (for example to make sure the bottom overlay doesn't cover the bottom arrow of your scrollbar).

Setting a z-index on the child elements will only work if you have nothing more than static text and images to show, and no links or interactive content. You're also not allowed to set a background for the parent, or it will hide the children.

To achieve this, you need to make 2 separate shadow overlay divs, and position them absolutely in a parent container. Your structure will be like this:

  • Parent container
    • Shadow overlay left
    • Shadow overlay bottom
    • Threadcontainer (overflow is set on this div)
      • Thread
      • Thread

Here is a working demo: http://jsbin.com/avafaq/1/edit

<div class="capture sh-btm">
<div id="shadow_overlay_left"></div>
<div id="shadow_overlay_bottom"></div>
<div class="threads">
<div class="thread"></div>
<div class="thread"></div>
</div>
</div>
#shadow_overlay_left{
width: 10px;
height: 100%;
position: absolute;
z-index: 5;
box-shadow: inset 3px -2px 5px 0px #000;
}
#shadow_overlay_bottom{
width: 100%;
min-height: 10px;
position: absolute;
bottom: 0%;
z-index: 5;
box-shadow: inset 0px -5px 9px 0px #000;
}
.threads {
overflow-y: scroll;
overflow-x: hidden;
}

Notice I put the overflow properties on the .threads container instead of the parent container. This is because else your absolutely positioned divs will scroll too, and will not fill their respective widths/ heights.

Again, you can apply box-shadow, a background-image or CSS gradients to your shadow overlay divs.

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.



Related Topics



Leave a reply



Submit