CSS es un lenguaje de hojas de estilo que describe la presentación del documento escrito con HTML o lenguajes de marcado similares. En este tutorial, vamos a aprender cómo configurar la sombra de texto interior con CSS.
Enfoque : la sombra del texto se usa para diseñar los elementos del texto, como párrafos, encabezados, etc. Primero establecemos el color de fondo y hacemos que el color del texto sea transparente. Luego recortamos el fondo de acuerdo con el texto para obtener solo esa parte. Finalmente, colocamos la sombra de texto borrosa delante del texto que da la sombra de texto interna.
Sintaxis de la sombra de texto interna:
text-shadow: offset-x | offset-y | blur-radius | colour background-clip: text; color: transparent;
- offset-x: Esto especifica la distancia de la sombra desde el texto en los ejes x.
- offset-y : Esto especifica la distancia de la sombra desde el texto en los ejes y.
- blur-radius : cuanto mayor sea el valor, mayor será la sombra y la luz.
- color (text-shadow) : Especifica el color de la sombra.
- background-clip : Esto especifica el elemento de recorte que es un texto aquí.
- color : Esto especifica el color del texto. Lo queremos transparente aquí.
Ejemplo : en el siguiente ejemplo, se muestra la sombra de texto interna con compensaciones cero en ambos ejes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<style>
.inner {
background-color: #565656;
font: bold 48px 'Futura';
color: transparent;
text-shadow: 0px 0px 3px rgba(91, 255, 76, 0.8);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
</style>
</head>
<body>
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong>
How to set inner text shadow with CSS ?
</strong>
<br />
<br />
<p class="inner">
Welcome to GeeksforGeeks
</p>
</center>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA