How can you achieve a "knockout" effect using CSS?

Question

UPDATE - Pretty sure I figured this out. The code is somewhat long, but I threw a page up here so you can view the source: http://www.sorryhumans.com/knockout-header

The concept was based on: http://algemeenbekend.nl/misc/challenge_gerben_v2.html and then adapted for my needs.

The header is responsive and knocked out. (Please ignore the bad, 1 minute responsive bg image implementation!). This implementation also does not use any CSS3, so I would imagine that there wouldn't be many issues with compatibility.

The only issue I find is that when the browser width is an odd number (e.g. 1393px) in Chrome there is a 1px gap between the right hand fluid column and the main center column. I don't see this issue in the latest version of Firefox, Internet Explorer, or when the width is an even number (e.g. 1394px in Chrome). Any ideas?

Original Question: I'm attempting to code a header that I designed, but am unable to figure out how to get the effect I'm looking for. Please look at the attached image (No, this is not actually what I'm working on :) just an example!)

The photo is a full-width responsive photo. The header is full-width, but its contents are on a responsive grid that does not exceed some arbitrary size (shown by the black lines), but can scale down. I can accomplish all of this, but what I am having trouble figuring out is how to make the make the header bar be transparent where the logo would be. In other words, rather than having the logo be on top of the bar, I would like to "knock it out" of the header.

Is this even possible?

Answer 1

There's no inherent support for knockout effects, so you'll have to have the text as part of an image.

The easiest way to do this would be to have the background behind the knockout effect be the solid part of the image. You can create a .png with a solid background and transparency where you want the knockout effect, and use css opacity to make the entire header partially transparent. You will need to set up the header with multiple sections so that the sections that are not images (i.e. outside the black bars) have a background color, while the sections with images do not.

Very roughly:

<div id="outerHeaderWithOpacity">
  <div class="hasBackground">Left side, will stretch</div>
  <div class="noBackground">Image(s) go here</div>
  <div class="hasBackground">As many sets as you need</div>
  <div class="noBackground">Image(s) go here</div>
  <div class="hasBackground">Right side, will stretch</div>
</div>

Answer 2

http://jsfiddle.net/GZ8Xv/

not the prettiest solution but using the experimental css3 flexbox: (with display: table fallback)

<div class="wrapper">
    <div class="left"><br /></div>
    <div class="middle"><br /></div>
    <div class="right"><br /></div>
</div>

.left, .right
{
    height:100%;
    border: 1px solid black;
    display:table-cell;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    -webkit-flex: 1;
}

.middle
{
    display: table-cell;
    display: -webkit-flexbox;
    width: 500px;
    height:100%;
    border: 1px solid blue
}

.wrapper
{
    display: table;

    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -o-box-orient: horizontal;
    width: 100%;
    height: 100px;
}

PLEASE NOTE: the flexbox w3c spec is still in flux and could change a third time. I only tested this in IE9 (both IE9 and IE8 modes. Does not work in IE7 mode) and Chrome 20 and 22

A few minor changes: http://jsfiddle.net/GZ8Xv/2/ and you have your 5 div layout without javascript.