Las mayúsculas se definen como la primera letra mayúscula de un párrafo en un tamaño de fuente mucho más grande que tiene la profundidad de dos o más líneas de texto normal.
La tarea se puede realizar utilizando el pseudoelemento CSS ::first-letter para crear un hermoso efecto de letras capitulares. El selector de ::primera letra en CSS se usa para aplicar estilo a la primera letra de la primera línea de un elemento de nivel de bloque, la condición es que no debe estar precedido por otro contenido (como imágenes o tablas en línea).
Sintaxis:
::first-letter {
// CSS Property
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg::first-letter {
font-size: 250%;
color: green;
}
div::first-letter {
font-size: 250%;
color: blue;
font-weight: bold;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
How to create drop caps
effect using CSS
</h1>
<p>
<div>Geeks</div>
<div>For</div>
<div>Geeks</div>
</p>
<p class="gfg">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA