El uso de la letra capital se ha difundido notablemente en las 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 empleo de imágenes para configurar la letra capital en un post, se puede lograr con un estilo más sofisticado, editando las imágenes con clip-path. Realmente generan un impacto en el usuario, dado que ese detalle no está tan difundido (lamentablemente en mi opinión), posiblemente, por desconocimiento de la metodología a aplicar, y, para hacer frente a esa "limitación" está la presente publicación.
Ejemplo Nro.1:
El siguiente es un ejemplo que ilustra lo antes expuesto:
El HTML es el siguiente:
<p> <img class="box1" alt="clipp" style="float: left; margin-right: 10px ;padding:0; display: inline;" src="https://yt3.ggpht.com/ytc/AMLnZu9CSQJHf7_S8BtHXb-aE8h3D7OAuf7xW5ohwA=s48-c-k-c0x00ffffff-no-rj"/> orem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan, sapien sed feugiat rutrum, sem sem volutpat neque, nec efficitur ipsum tellus eu elit. Suspendisse magna erat, rutrum vitae molestie.</p>
El CSS es el siguiente:
<style>
.clipp{
polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
}
.box1 {
background: #800000;
width: 50px;
height: 50px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
</style>
Definitivamente, es innegable el efecto desde el punto de vista estético. Rompe el tradicional "texto plano" muy aburrido, donde párrafo a párrafo, la única notoriedad serían algunas imágenes (si es que las colocan). Actualmente, recursos como emojis y animaciones dan otro aspecto, y a ese dúo, se suma la aplicación de la letra capital.
¿Quieres corroborar el efecto de la metodología descrita en una publicación concreta? Echa entonces un vistazo al siguiente enlace: https://notasdeseo.blogspot.com/
Otros ejemplos
Para finalizar este post, y fundamentar mejor desde el punto de vista ilustrativo, seguidamente un par de ejemplos adicionales.
El HTML usado, es el mismo en las tres ilustraciones. Por tanto, solo visualizaré los CSS de los dos ejemplos restantes.
Ejemplo Nro.2:
<style>
.clip-path{polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}
.box2 {
width: 60px;
height: 50px;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
</style>
Para ilustrar la funcionalidad del clip-path anterior en pro de la estética de un post, echa un vistazo al enlace siguiente: https://apuntesdebootstrap.blogspot.com/
Ejemplo Nro.3:
<style>
.clip-path2{polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);}
.box3 {
width: 50px;
height: 50px;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
</style>
Para ilustrar la funcionalidad del clip-path anterior en pro de la estética de un post, echa un vistazo al enlace siguiente: https://anatomiadelasciberpaginas.blogspot.com/
Recuerda: para probar con otros modelos de clip-path, consulta la siguiente página:
https://bennettfeely.com/
El punto es: ofrecer al usuario una publicación depurada de monotonía, y que lo motive a hacerse seguidor de tu página web.
La metodología como has podido ver, es sumamente sencilla y fácil de aplicar. Con conocimientos mínimos de HTML y CSS puedes hacer exactamente todo lo expuesto en este post.