Agregar una leyenda a las imágenes con CSS

Agregar una leyenda a las imágenes con CSS

Buenas, ahora con un tutorial el cual sera tratado de como añadir leyendas a las imágenes con CSS dándole un aspecto muy bonito!

Comenzando con el html, si nos fijamos este se trata de una tabla o más o menos así:

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"> <tbody> <tr> <td style="text-align: center;"> <a href="URL_imagen" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"> <img border="0" src="URL_imagen" /> </a> </td> </tr> <tr> <td class="tr-caption" style="text-align: center;">el texto con la leyenda agregada</td> </tr> </tbody> </table>

Es mucho para una pobre imagen, lo que hay.

Para darle un aspecto diferente basta agregar el estilo con nuestro CSS, dentro de <b:skin> </b:skin>; por ejemplo:

<style> table.tr-caption-container { /* esta es la tabla */ -moz-box-shadow: 0 0 30px #ABC; -webkit-box-shadow: 0 0 30px #ABC; box-shadow: 0 0 30px #ABC; border: 2px solid #567; margin: 0 auto; padding: 0; } td.tr-caption { /* esta es la leyenda */ background-color: #334455; border-top: 1px solid #556677; color: #DDEEFF; font-family: Georgia; font-size: 20px; padding: 5px 10px; } </style>

El resultado:

Esta es la leyenda agregada a la imagen

1.  ¿Te gusto el tutorial? → Síguenos en nuestras redes sociales. 
2. Comentar es Agradecer.

¡Compártelo!

Tweet