CODEWITHSUNDEEP
css
Jorge Israel Peña
Jorge Israel Peña

Reputation: 38586

Hide Section of a Box Shadow

Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:

Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.

Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.

I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.

Thanks, I really appreciate it.

EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.

Upvotes: 5

Views: 7032

Answers (3)

Luke
Luke

Reputation: 5602

clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:

.shadow-element {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>

Simply apply the following CSS to the element in question:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Where:

  • Apx sets the shadow visibility for the top edge
  • Bpx right
  • Cpx bottom
  • Dpx left

Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.

This solution removes the need to apply styling to a parent element, which gives more flexibility.

Upvotes: 0

honeybuzzer
honeybuzzer

Reputation: 139

overflow:hidden on ul.menu seems to get rid of the bottom shadow.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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..

Upvotes: 5

Related Questions