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)

6 opinaron:

Anónimo

Hola YK

Es muy práctico; apliqué el código junto con lo de las dos colulmnas y vieras que bien han quedado mis post; ahora voy a usar ese estilo.Gracias por ayudarnos.

Besos.

Responder
Anónimo

;) Un saludo

Responder
Jéssica YK

Fabiola: me alegra que te haya servido el código :o

Saludos

Responder
Jéssica YK

oloman-cosicas: gracias por la visita :)

Saludos

Responder
:::CRISTOADICTO:::

Hola Jessica, aca sacando algunos trucos sencillo que ofreces para nosotros. Muchas gracias por los recursos y por visitarme de vez en cuando, puedes volver cuando quieras.

Bendiciones
Shavy

Responder
Jéssica YK

:::CRISTOADICTO::: gracias por la visita y puedes estar seguro que pasaré por tu blog :)

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio