Alguien me preguntó recientemente acerca de esta técnica y mi primera reacción fue que probablemente era demasiado mundana para cubrirla como tutorial. Pero luego me puse a pensar que en realidad están sucediendo algunas cosas interesantes aquí y que el estilo es lo suficientemente moderno como para que la gente esté interesada.
La idea es simplemente superponer algo de texto sobre una imagen, pero como bloques que sobresalen de la izquierda con una cantidad uniforme de relleno alrededor del texto de longitud variable. Aquí hay un ejemplo de captura de pantalla:
Ver demostración
Los esquemas
El HTML
<div class="image">
<img src="https://css-tricks.com/text-blocks-over-image/images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>Poner la imagen como imagen de fondo del div de envoltura sería más fácil, pero en este escenario veo las imágenes como contenido y, por lo tanto, pertenecen al HTML. Usaremos ese div de envoltura como un contenedor para el posicionamiento absoluto.
El CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}Esto va a poner nuestro texto en la parte superior de la imagen muy bien, pero no logra el cuadro negro transparente que queremos lograr detrás del texto. Para eso, no podemos usar h2, porque es un elemento de nivel de bloque y necesitamos un elemento en línea sin un ancho específico.
Envuelva el interior h2 del en un lapso:
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>El uso de ese lapso para diseñar el texto y el fondo:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}Problema
Cuando un elemento en línea se rompe, el bloque se rompe inmediatamente después del último carácter de la línea y comienza inmediatamente alinee a la izquierda en la siguiente línea. El acolchado, en este caso, no nos ayuda.
Para resolver esto, aplicaremos algunos intervalos más a cada lado del elemento
para simular ese relleno.
<h2><span>A Movie in the Park:<span class="spacer"></span><br /><span class="spacer"></span>Kung Fu Panda</span></h2>Esos nuevos tramos que usaremos para aplicar relleno:
h2 span.spacer {
padding:0 5px;
}Arreglar la semántica
En este punto, el diseño está terminado, pero hay una gran cantidad de elementos HTML adicionales agregados simplemente por razones de diseño. Es decir, todos esos tramos. jQuery puede intervenir y salvarnos aquí. Simplemente elimine todos los intervalos del marcado y aplíquelos dinámicamente de esta manera:
$(function() {
$("h2")
.wrapInner("<span>")
$("h2 br")
.before("<span class="spacer">")
.after("<span class="spacer">");
});