En muchos libros es costumbre que la primera letra de cada capítulo tenga un tamaño superior al resto de letras. A veces solo cambia el tamaño, pero es habitual ver que también cambia de color e incluso de tipografía.
Pues bien, esto se puede llevar a cabo también en una web con la propiedad initial-letter de CSS. Para saber cómo utilizar esta propiedad en una web, nuestro profesor del bootcamp de programación, Sergio Jiménez, lo explica en el siguiente vídeo.
Aceptar el consentimiento para ver esto
En el vídeo, Sergio muestra un párrafo donde edita la primera letra con el pseudo elemento first-letter y añadiéndole distintas propiedades para cambiar su color, su tamaño y las líneas que ocupa. De esta forma, utiliza el siguiente código:
p::first-letter {
color: red;
font-weight: bold;
font-size: 2rem;
float: left;
}
Para el tamaño y la posición, se utilizan las propiedades font-size y float. Sin embargo, en lugar de usar estas propiedades, se puede utilizar otra llamada initial-letter, que proporciona un mayor control sobre la posición de la letra y que cuenta con dos parámetros.
El primer parámetro indica el tamaño en las líneas que queremos que ocupe esta primera letra del párrafo, si es 3 tendrá el tamaño correspondiente a 3 líneas. Mientras, el segundo parámetro indica las líneas que queremos que ocupe la letra en el párrafo, por lo que si es 2 ocupará 2 líneas. El segundo parámetro es opcional y en el caso de que no esté, la letra ocupará las mismas líneas que su tamaño, es decir, si su tamaño es 3, ocupará 3 líneas.
Asimismo, si el primer parámetro es 3 y el segundo 2, la letra tendrá un tamaño de 3 líneas, pero ocupará 2, por lo que sobresaldrá lo correspondiente a una línea por encima. Si, por el contrario, el segundo parámetro es superior al primero, por ejemplo, tiene un valor de 4, la letra tendrá un tamaño correspondiente a 3 líneas, pero ocupará 4. No obstante, lo normal es que el segundo parámetro no se utilice y la letra ocupe lo correspondiente a su tamaño.
Por otro lado, en ambos parámetros se pueden utilizar números decimales. Esto permite controlar el tamaño y la posición exacta que se quiere de la letra.
Además, Sergio utiliza también la propiedad margin-right para darle un poco de margen a la derecha de la letra, lo cual es una opción más para enriquecer el diseño de tu sitio web.
El código, con estas variantes, quedaría de la siguiente forma:
p::first-letter {
color: red;
font-weight: bold;
initial-letter: 3 2;
margin-right: 1rem;
}
Para aprender más y convertirte en profesional del desarrollo web, apúntate a nuestro Bootcamp Full Stack Web Developer e inicia tu carrera en el sector tecnológico.
