Como hacer un dropcap (letra capital) con css

Como 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.

Letra capital con css. Primer ejemplo

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.

Como hacer un dropcap (letra capital) con css 1
p{font-family:helvetica,sans-serif;}

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

Letra capital con css. Segundo ejemplo

En el segundo caso conseguimos el texto alrededor de nuestro dropcap mediante un float:left.

Como hacer un dropcap (letra capital) con css 2
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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.