Ultimamente he estado leyendo mucho sobre el uso correcto de las fuentes tipográficas en la Web, he de aceptar que es un apartado del diseño web al que menos atención le he prestado, pero soy consciente de la importancia que tiene. En esas lecturas he conocido un pequeño efecto, que seguramente muchos conocerán hablo de la Letra Capital, este efecto sobresalta la primera letra de un párrafo haciendo esta mas grande y con un estilo diferente al resto.
Veamos como aprender a realizar este efecto de una manera muy sencilla con HTML y CSS
Creamos un párrafo en nuestro documento HTML.
Párrafo con letra capital
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
Aplicando CSS
Para lograr el efecto de Letra Capital usaremos la propiedad First-Letter, esta propiedad es conocida como Pseudo -elemento, y como su nombre lo indica permite seleccionar la primera letra y aplicarle un estilo, para usarlo basta usar la siguiente sintaxis:
p:first-letter{
font-size: 50px;
display: block;
float: left;
margin: 0 5px -5px 0;
}
Si vemos el resultado podemos ver como se crea el efecto deseado.
Como ven es un efecto muy sencillo y hasta basico podríamos decir pero que seguramente te puede servir en un futuro proyecto.
