A veces, una página web contiene buenos contenidos para leer, pero el estilo de los textos parece simple y directo, por lo que se vuelve aburrido para los lectores leerlo y abandonan la página web. Pero cuando leen libros de cuentos, los leen completamente debido a las buenas imágenes de ese libro, por lo que completan la lectura del libro. Entonces, qué hacer para mejorar las imágenes y el estilo de los textos en la página web.
Este artículo le dirá cómo crear un efecto similar a un libro de cuentos en una página web usando solo HTML y CSS .
Antes del código, solo necesita incluir la siguiente hoja de estilo en su programa para la familia de fuentes: Cormorant Infant
<enlace href=”https://fonts.googleapis.com/css2?family=Cormorant+Infant&display=swap” rel=”hoja de estilo”>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<link href=
"https://fonts.googleapis.com/css2?family=Cormorant+Infant&display=swap"
rel="stylesheet">
<style type="text/css">
p.para1:first-letter {
font-size: 100px;
display: block;
float: left;
line-height: 0.5;
margin: 15px 15px 10px 0;
}
body {
font-size: 1rem;
width: 40%;
margin: auto;
font-family: cormorant infant;
}
</style>
</head>
<body>
<p class="para1">
GeeksforGeeks is my favourite site where
I can gain a lot of knowledge and can
also share my knowledge what i have
gained while learning. We can add more
paragraphs for content. This is just an
example to tell how to create a story
book like effect. More paragraphs,
content just for showing its best effect.
Some more paragraphs needed. Just some
more. Now you can see it.
</p>
<p>
This article tells about how to create
a story book like effect in a webpage
just using CSS. We can add more
paragraphs as required.
</p>
<p>Some more paragraphs can be included....</p>
</body>
</html>
Producción:
Ahora, como puede ver en la salida , hemos creado un hermoso efecto de libro de cuentos , que atraerá a los lectores a leer los contenidos de la página web.