¿Cómo se puede lograr un efecto "knockout" usando CSS?

Question

ACTUALIZACIÓN - Estoy seguro de que lo descubrí. El código es un poco largo, pero me lanzó una página aquí para que puedas ver la fuente: http://www.sorryhumans.com/knockout-header

El concepto se basa en: http://algemeenbekend.nl/misc/challenge_gerben_v2.html y luego adaptado para mis necesidades.

El encabezado es sensible y noqueado. (¡Por favor, ignore la mala, 1 minuto de implementación de imagen bg!). Esta implementación tampoco usa ningún CSS3, así que me imagino que no habría muchos problemas con la compatibilidad.

El único problema que encuentro es que cuando el ancho del navegador es un número impar (por ejemplo, 1393px) en Chrome, hay un espacio de 1px entre la columna de fluido de la derecha y la columna central principal. No veo este problema en la última versión de Firefox, Internet Explorer o cuando el ancho es un número par (por ejemplo, 1394 px en Chrome). ¿Algunas ideas?

pregunta original: que estoy tratando de codificar una cabecera que he diseñado, pero no puedo encontrar la manera de obtener el efecto que estoy buscando. Por favor, busque en la imagen adjunta (No, esto no es realmente lo que estoy trabajando :) sólo un ejemplo!)

la foto es una foto que responde a todo lo ancho. El encabezado es de ancho completo, pero su contenido está en una cuadrícula sensible que no excede un tamaño arbitrario (mostrado por las líneas negras), pero puede reducirse. Puedo lograr todo esto, pero lo que estoy teniendo problemas para descubrir es cómo hacer que la barra de encabezado sea transparente donde estaría el logotipo. En otras palabras, en lugar de tener el logo en la parte superior de la barra, me gustaría "eliminarlo" del encabezado.

¿Esto es posible?

Answer 1

No hay soporte inherente para los efectos knockout, por lo que tendrá que tener el texto como parte de una imagen.

La manera más fácil de hacer esto sería tener el fondo detrás del efecto knockout como la parte sólida de la imagen. Puede crear un .png con un fondo sólido y una transparencia donde desee el efecto knockout, y use css opacity para hacer que el encabezado entero sea parcialmente transparente. Tendrá que configurar el encabezado con varias secciones para que las secciones que no son imágenes (es decir, fuera de las barras negras) tengan un color de fondo, mientras que las secciones con imágenes no lo hagan.

Muy aproximadamente:

<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/

no

la solución más bonita pero utilizando el experimental FlexBox css3: (con 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; 
} 

OBSERVE POR FAVOR: la especificación de flexbox w3c todavía está en flujo y podría cambiar por tercera vez. Solo probé esto en IE9 (modos IE9 e IE8).No funciona en modo IE7) y Chrome 20 y 22

Cambios menores: http://jsfiddle.net/GZ8Xv/2/ y tiene su diseño de 5 div sin javascript.