Cómo hacer un dropcap (letra capital) con css

Capita es el término latín para referirse al principio. Tiene su origen en los escritos medievales.

Personalmente nunca he sido muy fan de este recurso artístico pero me viene muy bien para relacionarlo con el pseudoselector ::first-letter para referirse a la primera letra de un contenido cualquiera.

Tiene soporte por parte de los navegadores a partir de Explorer 9 incluido.

Letra capital con css

Hay muchas variantes de letra capital.

Dada una página web con el siguiente contenido (los textos se han dejado con lorem para que si tienes emmet instalado puedas sencillamente tabular el código para hacer desplegar todo un párrafo de lorem ipsum.)

<p class="estilo-1">lorem</p>

<p>lorem</p>

<p class="estilo-2">lorem</p>

<p>lorem</p>

Me centraré en dos:

• En línea con el contenido.
• Con el contenido alrededor de la letra capital.

[vc_custom_heading text=»Letra capital con css. Primer ejemplo» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]Para el párrafo le pido al navegador una tipografía sin serifa.

Para la letra capital cualquiera con serifa me basta.

También le pedimos a la primera letra que aumente considerablemente su tamaño. (3em)

Con estas instrucciones tenemos el primer caso.

p{font-family:helvetica,sans-serif;}

p.estilo-1::first-letter{
	font-size:3em;
	font-family:serif;
}

[vc_custom_heading text=»Letra capital con css. Segundo ejemplo» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]En el segundo caso conseguimos el texto alrededor de nuestro dropcap mediante un float:left.

p{font-family:helvetica,sans-serif;}

p.estilo-2::first-letter{
	font-size:3em;
	font-family:serif;
	margin:8px;
	float:left;
}

¡Esto es todo!

Ahora podríamos jugar con diferentes tipografías, fondos, border-radius, colores,… al gusto del diseñador.¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!