Re: suggestion of adding top,right,bottom,right to box-shadow

On Sep 14, 2011, at 10:41 AM, Alan Gresley <alan@css-class.com> wrote:

> On 15/09/2011 1:27 AM, Brad Kemper wrote:
>> 
>> On Sep 14, 2011, at 7:31 AM, Alan Gresley wrote:
> 
> 
>>> I'm not sure what Shi really wants.
>>> 
>>> Maybe a mock up graphic may help us know what you are seeking.
>> 
>> My understanding was based on following Shi's link [1], which leads
>> to a page [2] that has a link to the site, where there is a
>> navigation strip in which the shadow seems to be laying with the
>> other elements in an undesirable way. So it looks like either
>> cropping the shadow or having a way to send it to a different z-index
>> (outside the element's context) would be the most direct way to solve
>> the problem.
> 
> 
> Oh, I didn't see that link. Upon reading this.
> 
>  | 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.
> 
> 
> The simple way to do this is by source ordering. Like so.
> 
> (hacked together badly but shows the concept)
> 
> 
> http://css-class.com/x/shadow-test.htm
> 
> 
> This is the CSS added.
> 
> #mainContainer {
>  float:left;
>  margin-right: -1000px; /* this negative margin allows content to rise above this float */
>  position:relative;
>  z-index:1;
> }
> 
> #servicesContainer{
>  box-shadow: -5px -5px 5px -3px silver;
> }
> 
> #nav-box {
>  margin-top: -30px;
>  margin-left:200px;
>  float:left;
> }
> 

That just moves the problem, because now the content container is casting a shadow on the nav box. I think the desired effect is to have it look like all the shadows are behind all the elements put together.

Received on Thursday, 15 September 2011 05:24:42 UTC