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
Override Vuetify 2.0 SASS Variable $Heading-Font-Family
How to Set Div Height to 100% of Chosen Print Paper
Horizontal Submenu for a Vertical Main Menu Using Bootstrap
How to Fix Inconsistent Rendering of Adjacent Td Borders When They Are Collapsed
Using CSS Modules How to Define a Global Class
How to Use CSS Rotate() in Th Table Tags
Internet Explorer Not Recognizing CSS for Svg Elements
How to Add Focus to a Table Row <Tr>
Generate PDF with CSS and Images
CSS Background Color Extend as Far as Text
Align Text with Bottom as It Comes in During a Chat
Clearfix with Twitter Bootstrap
Difficulty in Understanding CSS-Styling in Mjml
Chrome Does Not Support The CSS @Page