I just want no border on the bottom of the box, or is it not possible? The reason I am using 'box-shadow:inset' instead of the regular border style because it does not alters my box size and shifts my box out of position.
.box {
width: 82px;
height: 56px;
box-shadow:inset 0px 0px 0px 5px #AC92C4;
border-radius: 5px 5px 0px 0px;
}
https://jsfiddle.net/dcaktwuz/
You wrote:
The reason I am using 'box-shadow:inset' instead of the regular border
style because it does not alters my box size and shifts my box out of
position.
You can still try to make a border (with border-bottom: none;) and add box-sizing: border-box, which will include the borders (and padding) in the overall width and height of the element.
You can shift shadows:
.box {
display: inline-block;
vertical-align: middle;
width: 82px;
height: 56px;
border-radius: 5px 5px 0px 0px;
border: 1px solid #ccc;
}
.shift1 {
box-shadow: inset 5px 5px 0px 5px #AC92C4;
}
.shift2 {
box-shadow: inset -5px 5px 0px 5px #AC92C4;
}
.shift1.shift2 {
box-shadow: inset 5px 5px 0px 5px #AC92C4, inset -5px 5px 0px 5px #AC92C4;
}
<div class="box shift1"></div> + <div class="box shift2"></div> =
<div class="box shift1 shift2"></div>
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.
Alright, I know that this question has been asked before, but I have a kind of different CSS and the effect is different too. My CSS:
div.side-bar {
text-align: right;
width: 11%;
margin-left: 88%;
border-left: 1px solid #000;
position: fixed;
height: 88%;
-webkit-box-shadow: -5px 0px 5px 0px #616161;
box-shadow: -5px 0px 5px 0px #616161;
}
So using the following code gives me a shadow to the left side as I wanted, but it also adds small shadows to both top and bottom sides too. How to have a shadow only on the left side?
Try changing your box-shadow property by adding a negative spread radius like this: http://jsfiddle.net/vW8VS/3/
div.side-bar {
text-align: right;
width: 11%;
margin-left: 88%;
border-left: 1px solid #000;
position: fixed;
height: 88%;
-webkit-box-shadow: -5px 0px 5px -3px #616161;
box-shadow: -5px 0px 5px -3px #616161;
}
That should let you push it off to just one side without worrying about the top and bottom.
I found to get the proper box-shadow effect to the left side of a div only I had to play around more with the css. use the below styles, they worked great for what I was trying to achieve.
-webkit-box-shadow: -35px 0px 20px -35px #aaa;
box-shadow: -35px 0px 20px -35px #aaa;
Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div
Greetings,
I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)
#div {
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
What would be the best way to accomplish this?
Thanks!
UPDATE
This shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the site itself to see what I'm talking about, easier than adding all of the HTML and CSS here.
UPDATE 2
Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:
-webkit-box-shadow: 0px -4px 7px #e6e6e6;
-moz-box-shadow: 0px -4px 7px #e6e6e6;
box-shadow: 0px -4px 7px #e6e6e6;
This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!
use the spread value...
box-shadow has the following values
box-shadow: x y blur spread color;
so you could use something like..
box-shadow: 0px -10px 10px -10px black;
UPDATE: i'm adding a jsfiddle
It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.
#servicesContainer {
/*your css*/
position: relative;
}
and it's fixed! like magic!
You can give multiple values to box-shadow property
eg
-moz-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
it is drop shadow to left and right only, you can adapt it to your requirements
I found a way to cover the shadow with ":after", here is my code:
#div:after {
content:"";
position:absolute;
width:5px;
background:#fff;
height:38px;
top:1px;
right:-5px;
}
The following code did it for me to make a shadow inset of the right side:
-moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;
Hope it will help!!!!
I was having the same issue and was searching for a possible idea to solve this.
I had some CSS already in place for my tabs and this is what worked for me:
(Note specifically the padding-bottom: 2px; inside #tabs #selected a {. That hides the bottom box-shadow neatly and worked great for me with the following CSS.)
#tabs {
margin-top: 1em;
margin-left: 0.5em;
}
#tabs li a {
padding: 1 1em;
position: relative;
top: 1px;
background: #FFFFFF;
}
#tabs #selected {
/* For the "selected" tab */
box-shadow: 0 0 3px #666666;
background: #FFFFFF;
}
#tabs #selected a {
position: relative;
top: 1px;
background: #FFFFFF;
padding-bottom: 2px;
}
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Thought I'd put this out there as another possible solution for anyone perusing SO for this.
I know this is very old, but none of these answers helped me, so I'm adding my answer. This, like #yichengliu's answer, uses the Pseudo ::after element.
#div {
position: relative;
}
#div::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 100%;
z-index: -1;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}
/*or*/
.filter.right::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background: white;
z-index: -1;
-webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}
Fiddle
If you decide to change the X of the drop shadow (first pixel measurement of the drop-shadow or box-shadow), changing the width will help so it doesn't look like there is a white gap between the div and the shadow.
If you decide to change the Y of the drop shadow (second pixel measurement of the drop-shadow or box-shadow), changing the height will help for the same reason as above.
I fixed such a problem by putting a div down the nav link
<div [ngClass]="{'nav-div': tab['active']}"></div>
and giving this css to it.
.nav-div {
width: inherit;
position: relative;
height: 8px;
background: white;
top: 4px
}
and nav link css as
.nav-link {
position: relative;
top: 8px;
&.active {
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px -1px;
}
}
Hope this helps!
Adding a separate answer because it is radically different.
You could use rgba and set the alpha channel low (to get transparency) to make your drop shadow less noticeable.
Try something like this (play with the .5)
-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
Hope this helps!
#div:before {
content:"";
position:absolute;
width:100%;
background:#fff;
height:38px;
top:1px;
right:-5px;
}