Prevent Box Shadow from Showing on a Specific Side

Prevent box shadow from showing on a specific side

As I stated in a related question of mine the solution to this problem is either very obscure or is not possible with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.

I resorted to using a png shadow as it seems to be the only sane solution.

Thanks for all of your suggestions.

Remove right side of box shadow

I think you have 2 options:

1) Set your shadow's horizontal alignment to the left (negative values).

box-shadow: -30px 0px 10px 10px #888888;

Although this way you won't have the same shadow size in the top and bottom.

2) Use a div inside a div and apply shadow to each one.

.div1
{
    box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
    box-shadow: -30px -10px 20px 10px #888888;
}

Then you'll have to ajust the size for the one you want.

Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/

How to prevent a div element to be affected by the box-shadow of another div element?

The comment made by @jcaron solve my problem:

One option would be to use the first option, then add another blue box at the same location as the first one, but without the shadow, and a higher z-index.

Thank you all for your support.

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/

Hide Section of a Box Shadow

You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..

box-shadow to the left side of a div only

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.

How can I add a box-shadow on one side of an element?

Yes, you can use the shadow spread property of the box-shadow rule:

.myDiv{  border: 1px solid #333;  width: 100px;  height: 100px;  box-shadow: 10px 0 5px -2px #888;}

<div class="myDiv"></div>

CSS3 Question: how to have no box shadow on the top of a div?

If you can nest two divs then you should be able to use a combination of margins and overflow:hidden to 'chop off' the top shadow without losing the required effect on the other edges.

For example this mark-up:

<div class="outer">
    <div class="inner">hello</div>
</div>

And this CSS

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

Gives this result - http://jsfiddle.net/ajcw/SLTE7/2/

Remove drop-shadow from left side only

You actually do want to use drop-shadow, since this is a "complex object". Move it to the parent element; you'll find the that drop-shadow is properly applied to the after pseudo-element:

#go-button {  position:relative;  border-radius: 6px;  height: 64px;  text-decoration: none;  width: 80%;  background-color: #00BFA5;  padding: 12px;  border: 0px solid #Fc4747;  color: white;  cursor: pointer;  font-size: 14px;  font-weight: 200;  z-index: 100;  -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));  filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";}
.bubble:after {  content: '';  position: absolute;  border-style: solid;  border-width: 15px 0 15px 24px;  border-color: transparent #00BFA5;  display: block;  width: 0;  z-index: 1;  margin-top: -15px;  right: -24px;  top: 50%;}

<button id="go-button" type="submit" class="bubble">  GO</button>

---

Related Topics