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

ACTUALIZAR - Estoy bastante seguro de que me di cuenta de esto. El código es algo largo, pero lancé una página aquí para que puedas ver la fuente: http://www.sorryhumans.com/knockout-header

El concepto se basó en: http://algemeenbekend.nl/misc/challenge_gerben_v2.html y luego adaptado a mis necesidades.

El encabezado responde y está eliminado. (¡Ignore la mala implementación de la imagen bg con respuesta de 1 minuto!). Esta implementación tampoco usa ningún CSS3, por lo 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, 1393 px) en Chrome, hay un espacio de 1 px entre la columna fluida 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 Estoy intentando codificar un encabezado que diseñé, pero no puedo averiguar cómo obtener el efecto que estoy buscando. Mire la imagen adjunta (No, esto no es en lo que estoy trabajando :) ¡solo un ejemplo!)

imagen de ejemplo

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

¿Esto es posible?

preguntado el 04 de julio de 12 a las 01:07

El uso de un .png es la forma más fácil de hacerlo, especialmente para un logotipo. -

@Sean ¿Qué has probado? haz que el juguete mire el css opacity? -

Usar una imagen es el único método que se me ocurre también. Esta entrada parece estar de acuerdo, pero también menciona SVG como alternativa. Sin embargo, me interesa saber si hay otro método. -

@JamesKhoury La única forma en que puedo pensar en hacer esto es tener 5 divs: 2 divs "laterales" que tienen el fondo transparente y pueden extenderse hasta el infinito, 1 logo div que es un png del fondo transparente con el logo golpeado out, un div que servirá como área de contenido y un div para contener el logotipo y el contenido. Algo así: [lado][[logotipo] [contenido]][lado] Pero, no creo que esto sea posible sin javascript, ¿verdad? Si tengo un contenedor div, el efecto transparente "knockout" tomará el color del contenedor. -

Hay soporte en WebKit para Máscaras CSS (Véase también caniuse.com/css-masks), pero solo puede usar una imagen como máscara, no texto. -

2 Respuestas

No hay soporte inherente para los efectos de eliminación, por lo que deberá tener el texto como parte de una imagen.

La forma más fácil de hacer esto sería hacer que el fondo detrás del efecto de cobertura sea la parte sólida de la imagen. Puedes crear un .png con un fondo sólido y transparencia donde quieras el efecto knockout, y usa css opacity para hacer que todo el encabezado sea parcialmente transparente. Deberá 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.

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>

Respondido 04 Jul 12, 01:07

Esto es lo que estaba pensando más o menos también, pero no pude entender cómo se vería el CSS. Haciendo referencia a la imagen original, el área del encabezado entre las barras negras debe permanecer centrada independientemente del tamaño de la pantalla. ¿Puedes ayudarme a descifrar esa parte? ¡Muchas gracias por su ayuda hasta ahora! - Sean Linehan

@SeanLinehan Podrías usar jQuery para establecer los anchos con algo como esto, Pero el flexbox El método en la otra respuesta parece mucho más elegante. - QuesoBrujo

http://jsfiddle.net/GZ8Xv/

no es la solución más bonita, pero usa el flexbox css3 experimental: (con display: table retroceder)

<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;
}

TOME EN CUENTA: la especificación flexbox w3c todavía está cambiando y podría cambiar por tercera vez. Solo probé esto en IE9 (ambos modos IE9 e IE8. No funciona en modo IE7) y Chrome 20 y 22

Algunos cambios menores: http://jsfiddle.net/GZ8Xv/2/ y tienes tu diseño de 5 div sin javascript.

Respondido 04 Jul 12, 03:07

¡Muchas gracias por tomarse el tiempo para ayudar! Creo que encontré una solución decente que no usa CSS3 con la que actualicé la publicación original si está interesado. - Sean Linehan

@SeanLinehan Me alegro de que hayas encontrado una respuesta. Sería bueno publicar su solución como respuesta y marcarla como aceptada. De esta manera, otros pueden encontrar su solución más fácilmente. - James Khoury

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.