28 Mar 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.
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.
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!
No Comments