Monday, April 7, 2014

Pie de foto: con fondo y sobre la imagen


El pie de foto es una peque?a y breve descripci?n que podemos a?adir a las im?genes que tengamos en el blog. Esta descripci?n da informaci?n precisa sobre la foto y nos ayuda a comprender dicha imagen.
Por ejemplo, al a?adir la foto de una persona podemos insertar un pie de foto que d� el nombre de la persona, su cargo, un m�rito, o un hecho con el que se le relacione, de esta forma quien mire la foto sabr? qui�n es, o qu� hizo esa persona.
Por el lado de SEO estas descripciones tambi�n nos ayudar a posicionar las im?genes en los buscadores ya que esta informaci?n tambi�n sirve para los robots.

Blogger nos da la opci?n de a?adir ese pie de foto (leyenda) cuando subimos la imagen, el problema es que el resultado es muy simple y poco llamativo, tanto que pasa casi desapercibido.

Cachorros en el jard?n

Lo que haremos ser? a?adir un pie de foto a las im?genes, pero a diferencia del pie de foto tradicional �ste estar? situado encima de la misma imagen y le agregaremos un fondo semitransparente, de modo que el resultado sea como este:


Si quieres tener un pie de foto como estos s?lo entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> agrega estos estilos:
.caption {
padding: 0;
width: 100%;
position: relative;
}
.caption img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200; /* Color de fondo */
background: rgba(234, 242, 0, 0.6); /* Color de fondo en RGBA */
color: #000; /* Color del texto */
font-size: 14px; /* Tama?o del texto */
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}
Ahora cada vez que quieras ponerle un pie de foto a tus im?genes usa este c?digo:
<div style="width:400px; padding:10px; margin:0 auto;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
Ah? ver?s d?nde se a?ade la descripci?n de la foto, as? como la URL de la imagen.
El tama?o de la imagen se cambia modificando lo que est? en negrita.

En el primer c?digo que a?adimos est?n los estilos para el pie de foto. Ver?s que el color de fondo est? dos veces, primero en c?digo hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomar? el primero, el hexadecimal, pero sin la transparencia. En la secci?n Colores puedes obtener el c?digo tanto en hexadecimal como en RGB.

La imagen estar? centrada por defecto, pero si quisieras alinear la imagen a la izquierda para que quede rodeada de texto entonces usa este c?digo:
<div style="width:400px; padding:10px; clear: left; float: left;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
En realidad es el mismo, s?lo hemos a?adido una flotaci?n a la izquierda y quitamos el margen. El resultado es el siguiente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.

Lo mismo podemos hacer si queremos alinear la imagen a la derecha.
<div style="width:400px; padding:10px; clear: right; float: right;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
Y se ver? as?:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.


?Y si quisi�ramos que el pie de foto aparezca s?lo cuando se pase el cursor por encima de la imagen?


En ese caso quitamos los estilos que hayamos puesto y en su lugar agregamos estos:
.caption {
padding: 0;
width: 100%;
position: relative;
}
.caption img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200;
background: rgba(234, 242, 0, 0.6);
color: #000;
font-size: 14px;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.caption:hover:before {
opacity:1;
filter:alpha(opacity=100);
}
El resultado en cualquiera de los casos me parece que es mucho m?s atractivo que el nativo de Blogger (aunque en gustos se rompen g�neros), adem?s que podemos personalizarlo a nuestro gusto cambiando el color de fondo, tama?o, tipo del texto, y estilos extra que se le pueden agregar seg?n la creatividad de cada quien.

No comments:

Post a Comment