Título con forma de banda superpuesta plegada

Ni idea de cómo se llama técnicamente este efecto pero para decirlo en menos palabras sólo podría indicar que es lo que podéis ver hoy día en este blog. 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.

He usado un antiguo blog de pruebas para ilustrarlo, así que si cuando veas esto ya no observas aquí nada parecido a lo explicado, echa un vistazo a este otro ejemplo:

Acceso a demo

El código que pondré es el utilizado para este último ejemplo, 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 0 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 deberéis ajustar para que quede exactamente dónde vosotros queráis.

En algunas plantillas puede que esa parte no sobresalga como debiera. En ese caso es porque probablemente el cuerpo de las entradas 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 esta entrada está definido en la línea background: #333; y el del triángulo en la que reza border-right: 12px solid #222;. Suele resultar interesante el añadir una imagen como fondo en lugar de un color plano.

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

Nota: La caja contenedora, en este caso post, no debe tener un overflow: hidden o el efecto quedará oculto al desbordar la misma. En su caso quitar esa propiedad CSS si no es imprescindible.

Y si quieres el mismo efecto pero doble y quizás incluso más fácil de montar, en esta otra entrada lo tienes

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter