I have 2 divs a parent and a child they both have fixed width and the child has fixed height too, child div is floated left and it has box-shadow:0 1px 2px 0 rgba(0,0,0,0.4) the problem is that the parent div overlaps the child's left shadow.
I can't add margin-left to the child because its left side is aligned with the left side of a menu div above the parent div so it has to be exactly where it is.
I tried z-index, minus margin for the parent and so many other things I can't even count but nothing seems to solve the problem.
the code is:
#menu {
width: 100%;
height: 50px;
background: #252525;
margin: 0 auto 20px auto;
}
#wrapper {
background: #CCC;
width: 1195px;
margin: 0 auto;
clear: both;
overflow: auto;
background: none;
position: relative;
}
#wrapper {
overflow: hidden;
}
#db_left,
#db_right,
#db_center {
margin-right: 30px;
float: left;
}
#db_left {
width: 170px;
position: relative;
}
#db_right {
margin-right: 0 !important;
width: 315px;
}
#db_center {
width: 650px;
margin-top: 20px !important;
}
#profpic_holder {
width: 150px;
height: 150px;
padding: 10px;
position: relative;
float: left;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
<body>
<div class="wrapper">
<div class="header">
Some Content...
</div>
<div id="db_left">
<div id="profpic_holder">
<img src="#" width="150" height="150" alt="" />
</div>
<div id="profname">
</div>
</div>
<div id="db_center">
</div>
<div id="db_right">
</div>
</div>
</body>
Fixed it.
The #wrapper is overflow:hidden so nothing outside its area can be seen including the child's shadow.
All I had to do was to hide only the overflow of its top and bottom so I did this:
#wrapper{
overflow-y:hidden;
}
The way you have it
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.4);
won't have a left shadow. If you want a shadow to show up on all sides use this
-webkit-box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4);
box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.4);
I hope this helps.
Related
The top image below indicates how drop-shadow would be drawn if applied to the top element. I'm trying to determine if it's possible to have the shadow cast only upon certain objects (as illustrated in the bottom image).
I'm open to non-standard solutions on this, but if possible I would prefer to still utilize the drop-shadow filter, as I'd like to use it with non-rectangular shapes as well.
Edit: A fiddle as requested. https://jsfiddle.net/fhrktawm/
Edit 2: Adding a more complex example to illustrate my use case. My purpose here is to indicate additional depth by varying the length of a drop shadows.
You can achieve that by using 4th value of box-shadow or drop-shadow .
And place shadow like in screen shots provided
As shadow of square is always square so it is possible at accurate places only when intersecting part is also square
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.box-1 {
z-index: 10;
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 0);
}
<div class="box box-1"></div>
<div class="box"></div>
Update
You can use ::after property to achieve 2nd effect like this
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
transform-style: preserve-3d;
}
.box-1 {
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 100px);
z-index: 100;
}
.box-1::after {
content: "";
width: 100px;
height: 100px;
position: absolute;
box-shadow: -15px 15px 0 rgba(0, 0, 0, 0.1);
z-index: -100;
transform: translateZ(-100px)
}
<div class="box box-1"></div>
<div class="box"></div>
But as you can see another box is above (because of transform-style: preserve-3d;) as not able to get the box shadow below the box . Tried a different method .
So different approach is done by using box-shadow of another element 2nd one like in below snippet with some variations in shadow
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.box-1 {
z-index: 10;
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 0);
}
.box-2::after {
content: "";
width: 100px;
height: 100px;
position: absolute;
box-shadow: 45px -45px 0 5px rgba(0, 0, 0, 0.1);
z-index: -1;
}
<div class="box box-1"></div>
<div class="box box-2"></div>
At last the desired output can be achieved like this :
.boxContainer {
border: 1px solid black;
width: 160px;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.box-1 {
z-index: 10;
box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
transform: translate3d(60px, 42px, 0);
}
.box-2 {
box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.25);
}
.box-2::after {
content: "";
width: 100px;
height: 100px;
position: absolute;
box-shadow: 45px -45px 0 6px rgba(0, 0, 0, 0.1);
z-index: -1;
}
<div class="boxContainer">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
I'm trying to determine if it's possible to have the shadow cast only upon certain objects
To be concise: no, this is not possible using either box-shadow or the drop-shadow() filter.
I have two divs. One with an image and one below with a background (semitranparent) and a text. The last div I give the css margin-top: -25px to make an overlap.
But the image in the first div is placed in between the semitranparent background and the text of the last div.
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
background-color: rgba(255,0,0,0.7);
text-align: center;
padding: 10px 20px;
margin-top: -50px;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
https://jsfiddle.net/Donslund/bsdk804p/1/
div.polaroid {
position:relative;
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
z-index:1;
}
div.container {
position:relative;
background-color: rgba(255,0,0,0.7);
text-align: center;
margin-top: -37px;
z-index:5;
color:white;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
Here it overlaps like you wanted (I assume).
See the following fiddle:
https://jsfiddle.net/b6bpzsg7/
It comprises 3 portfolio items which are divs with class porthole which just have left and right padding for offset to neighbour.
<div class="col-md-4 porthole">
<div class="portbox text-center">
<div class="portplace">
<div>Coming soon</div>
</div>
<header>Second</header>
</div>
</div>
The inner div has a class of portbox which I can see in chrome developer does not expand vertically to take up all of the porthole surrounding it. portbox has no padding, border or margin
Within the portbox there is a placeholder div with class portplace that has a margin of 15px all around and padding top and bottom of 30px. In chrome developer I see that the top margin extends outside of the enclosing portbox to the top margin of the outside porthole.
Can someone enlighten me?
EDIT
.portrow {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
background-color: #888;
}
.porthole {
padding: 0px 15px 0px 15px;
overflow: auto;
}
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.portplace {
margin: 15px 15px 15px 15px;
padding: 30px 0px 30px 0px;
background-color: lightgray;
color: darkslategrey;
}
Add overflow: auto to your parent div:
https://jsfiddle.net/pavy/b6bpzsg7/2/
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
overflow: auto; // you need this
}
Read up on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Add overflow="hidden" to the portbox to solve this problem.
I am working in HTML and CSS and I find it difficult to rearrange my overlapping elements.
Live example on the jsFiddle
CSS:
#posts {
background: blue;
float: right;
width: 75%;
padding: 5px;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
#login-container {
overflow: clear;
background: white;
width: 280px;
height: 330px;
}
HTML:
<div id="content" class="container">
<div id="posts">
<div id="login-container">
<div id="login">
<h1>Member login</h1>
</div>
</div>
</div>
</div>
These two always overlap to each other when I resize my browsers window.
I wish I can post an image here but it needs 10 reps.
May I ask, where are you closing the #posts div? This might be because #login-container is inside #posts.
Look here:
http://jsfiddle.net/nxyg0xwd/4/
#posts {
float: left;
width: 100%;
margin-left: 288px;
}
You have to left float the content, and create a margin in the size of the login vid.
I have this piece of html:
<html>
<body>
<header></header>
<div></div>
<footer></footer>
</body>
</html>
and this piece of css:
header {
width: 500px;
height: 100px;
background: red;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
div {
width: 500px;
height: 700px;
background: yellow;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 5;
}
footer {
width: 500px;
height: 50px;
background: blue;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
You can see this also here: http://jsfiddle.net/XGTtT/ Basically, I would like to have yellow area below other two areas, but z-index doesn't seem to work. What is wrong and how to fix it?
To achieve elements which are positioned in front or below each other you will need to use a mix of absolute positioning and z-index, as z-index will not currently work with the default positioning, which is static.
Depending on what you want to achieve it may be easier to add position: relative to the divs, and then use a negative margin on the div to pull it up/below the header and footer.
header {
width: 500px;
height: 100px;
background: red;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
position: absolute;
top:0;
}
div {
width: 500px;
height: 450px;
background: yellow;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 5;
position: absolute;
}
footer {
width: 500px;
height: 50px;
background: blue;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/XGTtT/8/
Higher number will come front, lower number will go back. A
nd give some different number for each element. Like for div 1, for header 2 and for footer 3.