The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 Drop shadow cut off?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #31556

    Hi Guys.

    I have been slaving away on a personal site and I’ve come across a problem.

    Basically I have 3 divs, a header with a sidebar and content side by side. I have added a drop shadow to all 3 divs, I’m trying to create the look of the drop shadows being combined.

    However either the drop shadow on the header goes on top of the divs below it or the drop shadow from the two divs below goes on top of the header.

    Here is an example of what I mean:

    My question: Is there a way to “cutoff” the dropshadow from the header or the two divs?

    Thanks for any help you can provide.


    The drop shadows and the divs are one entity, so the shadows will overlap the div above or below it if div itself would had it moved over the same region.

    What you could try doing is setting all the divs’ z-index to be equal. That might do it. You could also play with the css3 to get it to look like the shadows are blending with each other.
    As a final resort, give up on the affect or use an image


    Just put the div you want to cutoff under the other div. I mean

    and set the divyouwantocutoff‘s margin-top to minus value, so you don’t have set the z-index

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.