CSS Box Shadow - Top and Bottom Only
As Kristian has pointed out, good control over z-values will often solve your problems.
If that does not work you can take a look at CSS Box Shadow Bottom Only on using overflow hidden to hide excess shadow.
I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this:
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
This will give you some control over the "amount" of shadow in each direction.
Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.
Hope this was what you were looking for!
Box shadow on top, bottom and left only
You are close to a solution. You just need to tweak the values a bit.
Here is a working example with your method, with some added emphasis so you can see the changes I made.
box-shadow: inset 0 5px 0.5px 0.5px #000,
inset 0 -5px 0.5px 0.5px #000,
inset 5px 0.5px 0.5px #000;
https://jsfiddle.net/ercnvzj7/
I recommend this, for future shading: http://css3generator.com/
CSS3 Box Shadow on Top, Left, and Right Only
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!
CSS Box Shadow Bottom Only
Do this:
box-shadow: 0 4px 2px -2px gray;
It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.
How to create a drop shadow only on one side of an element?
UPDATE 4
Same as update 3 but with modern css (=fewer rules) so that no special positioning on the pseudo element is required.
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content:"";
position:absolute;
width:100%;
bottom:1px;
z-index:-1;
transform:scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>
How to get box-shadow on left & right sides only
NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.
You can get close with multiple box-shadows; one for each side
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/YJDdp/
Edit
Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/LE6Lz/
apply drop shadow to border-top only?
Something like this?
div {
border: 1px solid #202020;
margin-top: 25px;
margin-left: 25px;
width: 158px;
height: 158px;
padding-top: 25px;
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}
<div></div>
Related Topics
How to Remove Left Property When Position: Absolute
Understrap Child-Theme Edit Not Visible, SASS Color Variable Not Applied
Find Element That Is Causing the Showing of Horizontal Scrollbar in Google Chrome
Make an Item Stick to the Bottom Using Flex in React-Native
Google Chrome CSS Doesn't Update Unless Clear Cache
Set the Width of Select2 Input (Through Angular-Ui Directive)
Differencebetween * and *|* in CSS
CSS Box Shadow - Top and Bottom Only
Vertically Rotate Text Inside an HTML Table Header Cell
Removing the Blue Glow from an HTML Text Input When Selected
CSS Pseudo Classes Input:Not(Disabled)Not:[Type="Submit"]:Focus
Count Number of Selectors in a CSS File
Multiple And/Or Nested Bootstrap Containers