El uso de la letra capital se ha difundido notablemente entre los escritores de publicaciones de internet.
La notoriedad y elegancia que aporta al párrafo inicial, y por ende a la publicación en general, lo justifica.
Existen varias metodologías para conseguir ese efecto. Una de ellas es el uso de imágenes, con la letra inicial.
El uso de círculos coloridos con la letra capital, confieren al post, características de elegancia, buen gusto, variedad, notoriedad.
Veamos un ejemplo para comprobar su operatividad.
Ejemplo:
El procedimiento es muy sencillo: se inserta una imagen con la letra inicial, y se ajusta al texto con el style que se especifica en el código siguiente:
<p><img src="URL de la imagen" style="border-radius:50px;padding:0;display:inline;vertical-align:middle;" alt="letra m" width="40" height="40"> orem ipsum....</p>
Incluso, puedes no solamente aplicar la imagen a la letra inicial de la publicación, sino a las letras iniciales de cada párrafo; tal como puedes ver en el siguiente enlace:
https://notasdeseo.blogspot.com/
Si clicaste el enlace, pudiste ver el colorido que recibe el post con la metodología descrita. No obstante, no faltará quien opine que es simple carnaval, pero es válido, porque no todos tenemos idénticas percepciones acerca de lo que llamamos realidad. Lo cierto es que he visto publicaciones donde aplican letra capital a cada párrafo, pero sin el círculo colorido.
Respecto a las URL con las imágenes de las letras, tengo un portafolio donde las he archivado, y desde allí las copio para mis publicaciones. La URL es::
https://blogdeensayosvarios.blogspot.com/
Aplicando CSS
Pero, como era de esperarse, también tienes la opción adicional, de generar los círculos con CSS.
Seguidamente, un ejemplo donde aplico el código CSS de que dispongo si deseo descartar el uso de imágenes circulares:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan.
El CSS del ejemplo es el siguiente:
<style>
.img-placeholder{width:40px;height:40px;text-transform:uppercase;color:#fff;border-radius:50%;font-size:24px;display:inline-flex;justify-content:center;align-content:center;align-items:center}
.img-placeholder.red{background-color:#a12}
.img-placeholder.green{background-color:#188a8d}
.img-placeholder.grey{background-color:#999d9f}
.img-placeholder.orange{background-color:#f7a60f}
.img-placeholder.lightblue{background-color:#7199e2}
.img-placeholder.darkblue{background-color:#212b54}
</style>
El HTML del ejemplo es el siguiente:
<p><span class="img-placeholder red" styles="background-color:green;">L </span>orem ipsum... </p>
La diferencia con esta metodología, radica en que en el anterior método, el color de la imagen lo suministra la misma imagen, es decir, no lo puedes modificar a tu gusto. En cambio, en este segundo método, el color lo dispone el autor.
Por tanto, a efectos de ilustración, facilito la letra capital en los siguientes cinco colores detallados en el CSS. Incluso, puedes aplicar la tonalidad green (por ejemplo) de tu preferencia consultando alguna:
paleta de colores.
l orem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan.
l orem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan.
l orem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan.
l orem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan.
l orem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan.
La importancia de la facilidad ofrecida por CSS respecto a escoger colores, es que lo más normal es que cada autor tenga "colores favoritos" y los puede aplicar a sus textos.
Además, con CSS tienes la posibilidad de agregar más estilo, recurriendo a la edición de las imágenes con clip-path. Es un tema que detallo en el siguiente enlace:
Formateando letra capital con clip-path