Menu
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.
945
The box-shadow styles are used to pay attention to the content. Primer CSS Box Shadow Remove style is mainly used to remove the box-shadow. To remove the box-shadow, we will add an additional class . box-shadow-none.
Use a width calc() to position two elements next to each other. Then add the box-shadow to both elements, followed by the clip-path on only one of them. Set the z-index of the clip-path'd element to be higher than the non-clip-path'd element. Here's an example.
<blur-radius> This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
To set a box-shadow on one side of the element, use the box-shadow property. This property has four length parameters and a color. box-shadow: h-offset v-offset blur spread color; h-offset sets the shadow horizontally.
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..
55
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
