My <div> shadow box height is not covering inner <div>s height.
mainPageContent {
padding: 5px 5px 25px 5px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
generated html
<div class="mainPageContent">
<div>
<div class="col-md-10 col-md-offset-1" id="box_front_top"> <!-- bootstrap grid columns -->
----
----
</div>
<div class="col-sm-10 col-sm-offset-1" id="box_front_bottom" style="display: none;">
---
----
</div>
</div>
</div>
How to fix this?
If your inner divs are floated , then they do not affect the containers height unless you use the clear fix trick..
Try adding overflow:hidden on the container
.mainPageContent {
padding: 5px 5px 25px 5px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
overflow:hidden;
}
Did you try pull mainPageContent to the top of the stack using position relative + z-index?
Something like:
.mainPageContent {
position: relative;
z-index: 999;
padding: 5px 5px 25px 5px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc; }
I'm not sure if it will work in this case because you need the shadow to be above it's children, but could be worth a shot.
Related
How can I make a rectangle with long shadow like the image below using CSS?
Use this way:
#rectangle {
width: 150px;
height: 250px;
border: 2px solid black;
box-shadow: 1px 1px black,
2px 2px black,
3px 3px black,
4px 4px black,
5px 5px black,
6px 6px black,
7px 7px black,
8px 8px black,
9px 9px black,
10px 10px black;
}
<div id="rectangle"></div>
there.
Have you tried anything yet?
You can use a div: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div and you can use box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - but you might need many many box shadows to get that smooth edge. Good luck!
example using linear-gradient
.box_volume {
width: 200px;
height: 300px;
background: linear-gradient(to top, #FFD700, #F0E68C);
box-shadow:
1px 0px rgb(320,163,35), 1px 1px rgb(192,167,7),
2px 1px rgb(319,162,34), 2px 2px rgb(191,166,6),
3px 2px rgb(318,161,33), 3px 3px rgb(190,165,5),
4px 3px rgb(317,160,32), 4px 4px rgb(189,164,4),
5px 4px rgb(316,159,31), 5px 5px rgb(188,163,3),
6px 5px rgb(315,158,30), 6px 6px rgb(187,162,2),
7px 6px rgb(314,157,29), 7px 7px rgb(186,161,1),
8px 7px rgb(313,156,28), 8px 8px rgb(185,160,0),
9px 8px rgb(312,155,27), 9px 9px rgb(184,159,0);
}
<div class="box_volume">
</div>
So I have this 'floating-card' which has a box-shadow around it. On one side I want to put a colored border. But the box-shadow gives an extra white border. I want this removed but I dont know how. I want to keep the box-shadow. I tried several things including the answer of this question.
CSS Box-Shadow adds arbitrary white border to Div
To show specifically what I want removed:
The little small white border on the left of the blue.
Here is a JSFiddle and the code:
https://jsfiddle.net/pg5omtqq/
.floating-card {
background-color: white;
border-left: 5px solid blue;
box-shadow: 0px 0px 10px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
EDIT: To be clear, I want to keep the box-shadow. But have the small white border removed.
This will remove the shadow on the left
-webkit-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
You can adjust this by using this generator box shadow.
source: https://www.cssmatic.com/box-shadow
Add to your CSS
box-shadow: none;
remove left box-shadow by using below css.
.floating-card{
background-color: white;
border-left: 5px solid blue;
-webkit-box-shadow: 0px 0px 10px 0px grey;
-moz-box-shadow: 0px 0px 10px 0px grey;
box-shadow: 0px 0px 10px 0px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
-webkit-box-shadow: 2px 1px 10px grey;
-moz-box-shadow: 2px 1px 10px grey;
box-shadow: 2px 1px 10px grey;
I have a div tag that I want to style with rounded top corners. And, I am facing an issue with my box-radius.
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 20px 3px 1px #4D7594;
border-radius: 15px;
}
<div class="box">
</div>
Well, so far works good. But in this sample, if I add more px to my border-radius, it will break the inset of box-shadow.
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 20px 3px 1px #4D7594;
border-radius: 16px;
}
<div class="box">
</div>
You may notice that on the top area of the .box seems to have its shadow missing. This behavior only happens on firefox. And currently, I am using firefox 45.0.1.
Setting two shadows seems to fix it at this time :
.box {
width: 100px;
height: 100px;
-webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
box-shadow: inset 0 18px #4D7594, inset 0 20px 3px 1px #4D7594;
border-radius: 16px;
}
<div class="box">
</div>
I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.
What code would I need to achieve the cool border, and how can I target only images in the body text?
If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:
.main img {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 30px 0;
padding: 10px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
display: block;
}
img{
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:10px;
background:#fff;
border:1px solid #ccc;
width:auto;
height:auto;
}
Well i think it would be something like this for just a generic shadow effct.
The HTML:
<div id="example" class="outerglow">Full Shadow</div>
The CSS:
#example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}
.outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}
and here is the jsfiddle to look see..
http://jsfiddle.net/KMtc6/
Forgive me if my code is sloppy or jumbled.
My problem is that for the div classes form-profile and form-profile-side, if I want 2 of those divs, they must be on the same line within the HTML:
<div class="span13">
<form class="form-profile-side"></form><form class="form-profile"></form>
</div>
if I put the second class on a new line, it messes up the layout (this is what I'm trying to do):
<div class="span13">
<form class="form-profile-side"></form>
<form class="form-profile"></form>
</div>
CSS:
.form-profile-side {
display: inline-block;
vertical-align: top;
width: 120px;
background-color: #fff;
border: 1px solid #d6d6d6;
border-right: 0;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-profile {
display: inline-block;
width: 817px;
padding: 15px 15px 15px;
background-color: #fff;
border: 1px solid #d6d6d6;
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
How do I make it so that I can create a new line in the HTML using the class, instead of having it all on one line?
JSFiddle: http://jsfiddle.net/VzTxM/4/
I believe the issue you're having (if i understand the question right) is that the display:inline-block; is adding a lil spacer when the HTML is on two seperate lines - you can fix this by flaoting the elements instead?
CSS
.form-profile-side,.form-profile {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border: 1px solid #d6d6d6;
background-color: #fff;
float:left;
}
.form-profile-side {
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
vertical-align: top;
border-right: 0;
width: 120px;
}
.form-profile {
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
padding: 15px 15px 15px;
width: 817px;
}
.clear {
clear:both;
}
HTML
<div class="span13">
<form class="form-profile-side"><br><br></form>
<form class="form-profile"><br><br></form>
<div class="clear"></div>
</div>