Títulos de entradas con forma de banda superpuesta plegada

Este bonito efecto de diseño que va sobre el título de las entradas o post lo aprendí en OLOBLOGGER. Lo que se intenta es que el título simule ser una superficie superpuesta sobre las entradas, que cuando alcanza el borde de estas se pliega hacia atrás. El efecto visual de este diseño puede apreciarse en la figura que está al comienzo de esta entrada.

El código que pondré es el utilizado para el ejemplo de la figura último, pero algunos valores variarán forzosamente según la plantilla utilizada así que lo mejor es entender cómo funciona todo y no limitarse a copiar y pegar. Si luego no se sabe ajustar, lo normal es que no sirva de mucho.

Lo que haremos será convertir el título en un elemento de bloque para poder tratarlo en cuanto a propiedades de manera independiente y lo único destacable en esta parte será que lo desplazaremos a la izquierda mediante un margen izquierdo negativo.

Luego añadiremos un triángulo un poco más claro para completar el efecto, situándolo bajo el título y alineado con el lado izquierdo de este. Es así de sencillo.

Para lo primero añadimos este CSS antes del cierre SKIN (]]></b:skin>):

h3.post-title {
position:relative;
display:block;
overflow:hidden;
width: 85%;
height: 2em;
margin: 5px 0 0 -28px; 
padding:2px 4px 4px 40px;
background: #333;
border: 1px solid #555;
border-radius:10px 10px 10px 0;
line-height:1.10em;
}

Si probamos con Vista Previa observaremos cómo el título ha quedado dentro de un rectángulo con fondo negro, un borde más claro y desplazado hacia la izquierda.

Evidentemente, cada cual puede ajustar márgenes, padding, fondo y bordes como mejor le cuadre con su blog, pero lo que es imprescindible es que el cuarto valor del margin sea negativo. Ese valor es el que se lleva el título hacia la izquierda, fuera del cuerpo de las entradas, y es el que debes ajustar para que quede exactamente dónde quieras.

En algunas plantillas puede que esa parte no sobresalga como debiera. En ese caso es porque probablemente el cuerpo de las entradas (main-wrapper de la parte CSS de la plantilla) tenga un overflow:hidden que precisamente hará invisible todo lo que sobresalga.

Hay dos opciones si ocurre esto. Una es comprobar si es prescindible ese overflow y quitarlo. La otra es directamente olvidarse de este truco. Lo siento, pero habría que modificar muchas cosas para mantener el overflow y compatibilizarlo con esto.

Para el triángulo tendremos que crear una nueva clase CSS para después incluirla en la parte HTML de la plantilla.

Esta sería la clase que formaría el triángulo y su posición se controla nuevamente con el margin. El primer valor hace que se muestre bajo el rectángulo del título y el último es el que controla el desplazamiento a la izquierda. Otra vez, ese es el dato a modificar para colocarlo en el sitio exacto:

.trih3 {
display: block;
z-index: -1;
height: 0px;
width: 0px;
margin: -12px 0 0 -40px;
border: 12px solid transparent;
border-right: 12px solid #222;
}

Vista Previa no nos mostrará todavía nada porque no hemos utilizado esa clase en nuestra plantilla. Tras incluirla de la forma que se explica a continuación ya podremos echar un vistazo e ir ajustando su posición. Paciencia.

Con Expandir plantillas de artilugios seleccionado buscamos post.title hasta llegar a un trozo de código como este. En él insertamos justo antes del último cierre if una capa vacía con la clase trih3. La línea la he marcado en color verde.

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
<div class='trih3'/>
</b:if>

Ahora sí que podemos ver cómo queda el conjunto y rectificar lo necesario modificando los valores de margin negativos de h3.post-title y .trih3.

El resto es la parte "artística". Cuando el fondo del título sea claro, el del triángulo tendrá que ser un punto más oscuro para simular profundidad. Cuando el fondo del título sea muy oscuro, como en este ejemplo, el triángulo tendrá que ser un poco más claro para que se aprecie el cambio de tonalidad.

El fondo del título en el código de las entradas está definido en la línea background: #555 de h3.post-title; y el del triángulo en border-right: 12px solid #222 de .trih3. Suele resultar interesante el añadir una imagen como fondo en lugar de un color plano.

En el código puedes ver también un border-radius que he añadido, pero que es prescindible, lo que hace es redondear ciertas esquinas. El orden de los valores que contiene marca las esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda, respectivamente.