viernes, 17 de octubre de 2008

Letra capital con fondo y borde


Ahora vamos a ver cómo añadir letra capital, pero con estilo, a los textos del post.
Para ello, usamos el siguiente código:

<!-- the drop cap -->
<span style="margin-right:6px;margin-top:5px;float:left;color:blue;background:green;border:1px solid darkblue;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family:times;">LETRACAPITAL</span>TEXTO JUNTO A LA LETRA CAPITAL<div style="clear:both;"><br></div>


Ahora vamos con la explicación:

color:blue es el color de la letra capital; para cambiarlo, colocamos en lugar de blue el nombre de otro color (red, green,etc.) en inglés.
background:green es el color de fondo de la letra capital.
border:1px solid darkblue nos permite modificar el grosor del borde (modificar 1px), el estilo (cambiar solid por otro tipo de líneas)y el color del borde (sustituir darkblue por el color de nuestro gusto).
font-family:times; nos da la posibilidad de escoger la fuente del texto (por ejemplo, la letra del comienzo de esta entrada).
LETRACAPITAL aquí ponemos la primera letra del texto que vamos a escribir .
TEXTO JUNTO A LA LETRA CAPITAL es el texto que sigue a la letra capital.

Y ahora un ejemplillo más:


El protagonista, Jean Valjean, un hombre que recién acaba de salir de prisión, busca refugio y alimento. Sin embargo, nadie quiere acogerlo por haber sido un ladrón. Después de haber tocado muchas puertas, toca la puerta de un sacerdote que lo acoge: le da de comer y permite que pase la noche en su casa.Valjean se levanta y coge unos cubiertos de plata. Está a punto de irse, cuando ingresa el sacerdote. Valjean lo golpea y se va.Al día siguiente, unos oficiales llevan a Valjean a la casa del sacerdote, porque no le creen que, según Valjean, el sacerdote le haya regalado los cubiertos.

Se ve muy bien,verdad?

Idea: ahora que ya sabemos cómo hacer una letra capital en los post de nuestro blog, podemos usarlo junto con el HTML de dos columnas (ver Texto del post en dos columnas)

No hay comentarios:

Publicar un comentario