El efecto de texto tallado también se conoce como efecto de relieve, ya que parece que el texto ha sido grabado en relieve sobre un fondo. También se conoce como Neumorfismo en CSS. Este efecto se utiliza cuando queremos darle a nuestro sitio web un aspecto limpio y refrescante. El texto incrustado puede ser del mismo color que el fondo o quizás de un color diferente. Estaremos mirando el mismo tipo de color.
Enfoque: el enfoque es primero hacer que el texto sea invisible dándole el mismo color que el fondo y luego darle una sombra delgada al texto para que se vuelva visible debido a la sombra del borde.
Código HTML: en esta sección hemos creado dos div y un texto envuelto dentro del div anidado. También puede usar h1 en lugar de la etiqueta div anidada.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Embedded Text</title> <link href= "https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@700&display=swap" rel="stylesheet"> </head> <body> <div class="geeks"> <div class="gfg"> GeeksforGeeks </div> </div> </body> </html>
Código CSS: en CSS, primero hemos hecho algunos estilos básicos, como alinear el texto al centro y proporcionarle un fondo y configurar la fuente de Google. Luego, como se discutió en el enfoque, le hemos dado a nuestro texto el mismo color que el fondo. Ahora hemos utilizado una combinación de sombras finas en blanco y negro para dar un tipo de efecto de contorno alrededor de nuestro texto que hace que nuestro texto sea visible ahora.
Sugerencia: puede usar cualquier color para la sombra y el texto, pero asegúrese de mantener la sombra lo más delgada posible.
CSS
<style>
body {
font-family: 'Baloo Chettan 2', cursive;
background: green;
}
.geeks {
position: absolute;
top: 50%;
left: 40%;
}
.gfg {
position: relative;
display: block;
font-size: 80px;
color: green;
text-shadow: -1px 1px 1px
rgba(0, 0, 0, .4), 1px -1px 0
rgba(255, 255, 255, 1);
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Embedded Text</title>
<link href=
"https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Baloo Chettan 2', cursive;
background: green;
}
.geeks {
position: absolute;
top: 50%;
left: 40%;
}
.gfg {
position: relative;
display: block;
font-size: 80px;
color: green;
text-shadow: -1px 1px 1px
rgba(0, 0, 0, .4), 1px -1px
0 rgba(255, 255, 255, 1);
}
</style>
</head>
<body>
<div class="geeks">
<div class="gfg">
GeeksforGeeks
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA