Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to simulate a window-like content area cutout in HTML5 + CSS3

How to simulate a window-like content area cutout in HTML5 + CSS3

Problem

I have an interesting content layout proposal but I'm having difficulty figuring out how it can work. Inside the "content box" container, we want to be able to animate (using jQuery) Elements being scrolled out of view, becoming hidden once they have touched the edge of the content box, almost as if the content box was a window.

This would be trivial if the Logo Box above the content was attached to the content box (assuming elements are moving upward) and entirely opaque, because then its z-index could be set higher and elements that are animated towards it would slide under it. Obviously, right now the elements just fly out of the content box and are seen on top of everything.

Even if the Logo box was inside another div that was connected to the content box, it would need to have the same background image as the body in order to still appear transparent and hide the elements heading towards it trying to become hidden. This obviously can't work because the image being used for the logo-containing div and the body wouldn't line up.

So it seems as though what we're looking to do isn't feasible, but let's hear what you have to suggest. We're looking to use HTML5 + CSS3 for this project.

Problem courtesy of: Sam.Rueby

Solution

If the content box is set to overflow:hidden and position:relative any elements inside it should be hidden when outside the bounds of the box, even if they are absolutely positioned.

Here is a jsFiddle illustrating: http://jsfiddle.net/c8LHL/

Solution courtesy of: David Brainer

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to simulate a window-like content area cutout in HTML5 + CSS3

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×