Related
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;
I have a div with a very thick border and I'd like to have the close button on the top-right of the border and not the div. The problem I'm having is that no matter what z-index I put, the border is always on top of my close-button div. I've tried setting the border to be on the inside of the div, but the same problem keeps happening. Any suggestions?
Thanks!
.aboutcontainer{
position: relative;
width: 55%;
height: 70%;
margin: auto;
margin-top: 6%;
background: white;
z-index: 3;
border: 20px solid black;
padding-left: 15px;
padding-right: 15px;
overflow: auto;
box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
-moz-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
-khtml-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
-webkit-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
}
.closeBtn {
position: absolute;
top: -10px;
right: -10px;
border: solid 1px red;
z-index: 4;
cursor: pointer;
}
Your overflow: auto; tag is hiding everything outside of the main div, including things atop the border. Remove it, and the button will show.
Remove overflow:auto and even z-index is not necessary here. Give width and height to inner div to see the effect.
DEMO
Remove border from .aboutcontainer.
Put it inside another div and give that parent container some padding and background color that will create a border effect.
Place your .aboutcontainer and .closeBtn inside that div now you are free to position the close button anywhere you want also keeping the overflow property of your .aboutContainer intact.
I'm attempting to use a dark shadow color on three sides of a div, and a light "glow" on one side -- essentially using two different colors for the CSS box shadow. So far the best solution I've come up with is to place a shadow on all sides but one, and use a second div with a glow, and a third div to hide the glow on all but one side with margins and overflow-hidden. I was just wondering if there might be a better (CSS-only) method than the one I'm implementing? Any ideas?
Demo here - http://swanflighthaven.com/css-shadow-glow.html
It doesn't look nearly as nice on a light background:
http://swanflighthaven.com/css-shadow-glow2.html
#main {
max-width:870px;
min-width:610px;
margin:0px auto;
position:relative;
top:40px;
min-height:400px;
}
#maininside {
position:relative;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow:hidden;
padding:0px 25px 25px 25px;
}
#maininner {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow:hidden;
box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
-moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
-webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
min-height:385px;
padding:0px 15px 15px 15px;
background:url(center.png) repeat;
}
#glow {
position:absolute;
height:50px;
top:0px;
box-shadow: 0 -10px 20px -5px #7b272c;
-moz-box-shadow: 0 -10px 20px -5px #7b272c;
-webkit-box-shadow: 0 -10px 20px -5px #7b272c;
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-right:25px;
margin-left:25px;
margin-bottom:25px;
}
<div id="main">
<div id="glow">
</div>
<div id="maininside">
<div id="maininner" ></div>
</div>
</div>
You can just write multiple shadows, comma separated:
{
box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80), 0 -10px 20px -5px #7b272c;
}
See https://developer.mozilla.org/En/CSS/Box-shadow
try negative spread values in the box-shadow css
Instead of creating the second div with the fancy margins and the hiding, try to play around with a negative spread value. It reduces the bleeding on the sides that you don't want your shadow to show up on. Play around with the example on my jsfiddle, set the spread to 0, -10, -5... you'll get the hang of it quick.
#glow {
/* x y blur spread color */
box-shadow: /* ie */
0px -10px 15px -6px rgba(255,000,000,0.7), /* top - THE RED SHADOW */
0px 5px 15px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 15px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 15px 0px rgba(000,000,000,0.3); /* left */
-webkit-box-shadow:
0px -10px 15px -7px rgba(000,255,000,0.7), /* top - THE RED SHADOW */
0px 5px 15px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 15px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 15px 0px rgba(000,000,000,0.3); /* left */
-moz-box-shadow:
0px -9px 10px -8px rgba(000,000,255,0.9), /* top - THE RED SHADOW */
0px 5px 10px 0px rgba(000,000,000,0.3), /* bottom */
5px 0px 10px 0px rgba(000,000,000,0.3), /* right */
-5px 0px 10px 0px rgba(000,000,000,0.3); /* left */
}
body {
padding: 10%;
background-color: #fefefe;
}
div {
height: 300px;
width: 300px;
margin: 0px auto;
border-radius: 2pt;
border: 1px solid rgba(0,0,0,0.8);
background-color: #fefefe;
}
<div id="glow"></div>
I had to play around with the properties a bit to get them to look similar in the different browsers. Mozilla/FF was the biggest pain. Look at how much the values differ... it's kind of a tedious game of cat and mouse off-setting the blur with spread...
box-shadow is used in IE.
webkit is used in Chrome.
moz is used in Firefox.
http://jsfiddle.net/CoryDanielson/hSCFw/
Is there a way to drop the shadow only on the bottom?. I have a menu with 2 images next to each other. I don't want a right shadow because it overlaps the right image. I don't like to use images for this so is there a way to drop it only on the bottom like:
box-shadow-bottom: 10px #FFF; or similar?
-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
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>
UPDATE 3
All my previous answers have been using extra markup to get create this effect, which is not necessarily needed. I think this is a much cleaner solution... the only trick is playing around with the values to get the right positioning of the shadow as well as the right strength/opacity of the shadow. Here's a new fiddle, using pseudo-elements:
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
<div id="box" class="box-shadow"></div>
CSS
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
UPDATE 2
Apparently, you can do this with just an extra parameter to the box-shadow CSS as everyone else just pointed out. Here's the demo:
http://jsfiddle.net/K88H9/821/
CSS
-webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
This would be a better solution. The extra parameter that is added is described as:
The fourth length is a spread
distance. Positive values cause the
shadow shape to expand in all
directions by the specified radius.
Negative values cause the shadow shape
to contract.
UPDATE
Check out the demo at jsFiddle: http://jsfiddle.net/K88H9/4/
What I did was to create a "shadow element" that would hide behind the actual element that you would want to have a shadow. I made the width of the "shadow element" to be exactly less wide than the actual element by 2 times the shadow you specify; then I aligned it properly.
HTML
<div id="wrapper">
<div id="element"></div>
<div id="shadow"></div>
</div>
CSS
#wrapper {
width: 84px;
position: relative;
}
#element {
background-color: #3D668F;
height: 54px;
width: 100%;
position: relative;
z-index: 10;
}
#shadow {
background-color: #3D668F;
height: 8px;
width: 80px;
margin-left: -40px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 5;
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
Original Answer
Yes, you can do this with the same syntax you have provided. The first value controls the horizontal positioning and the second value controls the vertical positioning. So just set the first value to 0px and the second to whatever offset you'd like as follows:
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
For more info on box shadows, check out these:
http://www.css3.info/preview/box-shadow/
https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
http://www.w3.org/TR/css3-background/#the-box-shadow
Just use the spread parameter to make the shadow smaller:
.shadow {
-webkit-box-shadow: 0 6px 4px -4px black;
-moz-box-shadow: 0 6px 4px -4px black;
box-shadow: 0 6px 4px -4px black;
}
<div class="shadow">Some content</div>
Live demo: http://dabblet.com/gist/a8f8ba527f5cff607327
To not see any shadow on the sides, the (absolute value of the) spread radius (4th parameter) needs to be the same as the blur radius (3rd parameter).
If you have a fixed color on the background, you can hide the side-shadow effect with two masking shadows having the same color of the background and blur = 0, example:
box-shadow:
-6px 0 white, /*Left masking shadow*/
6px 0 white, /*Right masking shadow*/
0 7px 4px -3px black; /*The real (slim) shadow*/
Note that the black shadow must be the last, and has a negative spread (-3px) in order to prevent it from extendig beyond the corners.
Here the fiddle (change the color of the masking shadows to see how it really works).
div{
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}
<div></div>
You could also use clip-path to clip (hide) all overflowing edges but the one you want to show:
.shadow {
box-shadow: 0 4px 4px black;
clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}
See clip-path (MDN). The arguments to polygon are the top-left point, the top-right point, the bottom-right point, and the bottom-left point. By setting the bottom edge to 200% (or whatever number bigger than 100%) you constrain your overflow to only the bottom edge.
Examples:
.shadow {
box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5);
}
.shadow-top {
clip-path: polygon(0% -20%, 100% -20%, 100% 100%, 0% 100%);
}
.shadow-right {
clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
}
.shadow-bottom {
clip-path: polygon(0% 0%, 100% 0%, 100% 120%, 0% 120%);
}
.shadow-left {
clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
}
.shadow-bottom-right {
clip-path: polygon(0% 0%, 120% 0%, 120% 120%, 0% 120%);
}
/* layout for example */
.box {
display: inline-block;
vertical-align: top;
background: #338484;
color: #fff;
width: 4em;
height: 2em;
margin: 1em;
padding: 1em;
}
<div class="box">none</div>
<div class="box shadow shadow-all">all</div>
<div class="box shadow shadow-top">top</div>
<div class="box shadow shadow-right">right</div>
<div class="box shadow shadow-bottom">bottom</div>
<div class="box shadow shadow-left">left</div>
<div class="box shadow shadow-bottom-right">bottom right</div>
I think this is what you're after?
.shadow {
-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
box-shadow: 0 0 0 4px white, 0 6px 4px black;
}
<div class="shadow">wefwefwef</div>
Another idea based on the answer of #theengineear where I will use inset instead of polygon. It's easier since it works the same way as margin or padding. I will also rely on CSS variable to easily define all the different cases.
.shadow {
box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5);
clip-path:inset(var(--t,0) var(--r,0) var(--b,0) var(--l,0))
}
.top { --t:-100%; }
.right { --r:-100%;}
.bottom { --b:-100%; }
.left { --l:-100%;}
/* layout for example */
.box {
display: inline-block;
vertical-align: top;
background: #338484;
color: #fff;
width: 4em;
height: 2em;
margin: 1em;
padding: 1em;
}
<div class="box">none</div>
<div class="box shadow top right left bottom">all</div>
<div class="box shadow top">top</div>
<div class="box shadow right">right</div>
<div class="box shadow bottom">bottom</div>
<div class="box shadow left">left</div>
<div class="box shadow bottom right">bottom right</div>
<div class="box shadow bottom top">top bottom</div>
<div class="box shadow left top right">top left right</div>
<div class="box shadow left right"> left right</div>
It's always better to read the specs. There is no box-shadow-bottom property, and as Lea points out you should always place the un-prefixed property at the bottom, after the prefixed ones.
So it's:
.shadow {
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
<div class="shadow">Some content</div>
How about just using a containing div which has overflow set to hidden and some padding at the bottom? This seems like much the simplest solution.
Sorry to say I didn't think of this myself but saw it somewhere else.
Using an element to wrap the element getting the box-shadow and a overflow: hidden on the wrapper you could make the extra box-shadow disappear and still have a usable border.
This also fixes the problem where the element is smaller as it seems, because of the spread.
Like this:
#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }
Content goes here
Still a clever solution when it has to be done in pure CSS!
As said by Jorgen Evens.
I also needed a shadow but only under an image and set in slightly left and right. This worked for me:
.box-shadow {
-webkit-box-shadow: 5px 35px 30px -25px #888888;
-moz-box-shadow: 5px 35px 30px -25px #888888;
box-shadow: 5px 35px 30px -25px #888888;
}
The element this is applied to is a page-wide image (980px x 300px).
If it helps when fiddling with the settings, they run as follows:
horizontal shadow, vertical shadow, blur distance, spread (i.e. shadow size), and color.
It is better to look up shadow:
.header{
-webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}
this code is currently using on stackoverflow web.
If your background is solid (or you can reproduce it using CSS), you can use linear gradient that way:
div {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}
<div>
<p>Foobar</p>
<p>test</p>
</div>
This will generate a 5px gradient at the bottom of the element, from black at 30% opacity to completely transparent. The rest of the element has white background. Of course, changing the last 2 color stops of the linear gradient, you could make the background completely transparent.
This code pen (not by me) demonstrates a super simple way of doing this and the other sides by themselves quite nicely:
box-shadow: 0 5px 5px -5px #333;
https://codepen.io/zeckdude/pen/oxywmm
You could also just do a gradient on the bottom - this was helpful for me because the shadow I wanted was on an element that was already semi-transparent, so I didn't have to worry about any clipping:
&:after {
content:"";
width:100%;
height: 8px;
position: absolute;
bottom: -8px;
left: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}
Just make the "bottom" and "height" properties match and set your rgba values to whatever you want them to be at the top / bottom of the shadow
You can do that like this:
General syntax:
selector {
box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}
Example: we want to make only a bottom box shadow with red color,
so to do that we have to set all the sides options where we have to set the bottom box shadow options and set all the others as empty as follow:
.box {
-moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
-o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
-webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}
You need fist to know each value is for what:
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows:
Top shadow: offset-x: 0 and offset-y: -5px
Right shadow: offset-x: 5px and offset-y: 0
Bottom shadow: offset-x: 0 and offset-y: 5px
Left shadow: offset-x: -5px and offset-y: 0
.box{
margin: 2rem;
padding: 1rem;
}
.shadow-all{
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.shadow-top {
box-shadow: 0 -5px 3px -3px #00000030;
}
.shadow-right {
box-shadow: 5px 0 3px -3px #00000030;
}
.shadow-bottom {
box-shadow: 0 5px 3px -3px #00000030;
}
.shadow-left {
box-shadow: -5px 0 3px -3px #00000030;
}
<div class="box shadow-all">
Shadow All
</div>
<div class ="box shadow-top">
Shadow Top
</div>
<div class ="box shadow-right">
Shadow Right
</div>
<div class ="box shadow-bottom">
Shadow Bottom
</div>
<div class ="box shadow-left">
Shadow left
</div>
Read more here and here
inset top and bottom box-shadow
.cont{
position: relative;
border: 1px solid black;
margin: 0 auto;
width: 200px;
height: 200px;
overflow: hidden;
}
.shadow {
position: absolute;
width: 100%;
height:100%;
box-shadow: inset gray 0px 50px 15px 0px,inset gray 0px -50px 15px 0px;
padding-right: 30px;
margin-left: -15px;
}
<div class=cont>
<div class=shadow></div>
</div>
update on someone else his answer transparant sides instead of white so it works on other color backgrounds too.
body {
background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}
div {
background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
background-size: contain;
width: 100px;
height: 100px;
margin: 50px;
border: 5px solid white;
box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}
<div>
</div>
inner shadow
.shadow {
-webkit-box-shadow: inset 0 0 9px #000;
-moz-box-shadow: inset 0 0 9px #000;
box-shadow: inset 0 0 9px #000;
}
<div class="shadow">wefwefwef</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;
}