Letra Capital en CSS

Para crear el famoso efecto de letra capital tan utilizado en libros y revistas, hemos de utilizar el pseudo-elemento first-letter aplicado a un párrafo cualquiera a través de una clase o un identificador, por ejemplo:

?Ver código CSS
#parrafo:first-letter
{
color: #666666;
display: block; /* Lo convertimos en bloque */
float: left; /*Lo mandamos a la izquierda */
font-size: 72px;	/* Hacemos crecer la primera letra */
margin: 5px; /* Y le ponemos un margen cuadrado de 5 píxeles */
}

Mismo que, aplicado al párrafo en donde queremos usar la letra capital:

?Ver código HTML
<p id="parrafo">Marcos llego en ese momento a la...</p>

Quedaría como sigue:

Letra capital en CSS

Recursos adicionales

  1. Ver el ejemplo funcionando
  2. Descargar Código completo
  3. ¿Dudas? Pregunta en los foros
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera