My page is here
My first attempt at this paper curl effect isn’t working, “Main Head”. As you can see, I can’t get the shadows behind the div. This was originally an h2 tag. I changed it to a div when the original wouldn’t work, but it still doesn’t. I’m thinking I’m missing the stacking context somehow, but haven’t figured it out. Changed the opacity of #personnel too, no change.
HI,
Not really sure what end effect you are after but you would need to remove the position:relative from .main-height and then apply position:relative to #personel instead with a z-index of 0. That will allow the pseudo elements to go underneath the main-head but stay above the white background. You can’t put a positioned child behind its parents background when the parent has a z-index other than auto.
Use negative side margins to pull .main-head wide and if you want it to cover the whole white background then remove the width also.
That should get you close although you may need to tweaks the position of the folds using top rather than bottom.
This might help, too.
@PaulOB, you rock!
@ronpat, that’s the page I started with. I just had the wrong element positioned relative.
Thank you guys so much!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.