En este artículo, aprenderemos cómo aplicar el efecto de sombra en el texto usando CSS. La propiedad text-shadow de CSS se usa para aplicar el efecto de sombra en el texto.
Enfoque: La propiedad text-shadow de CSS se usa para aplicar el efecto de sombra en el texto. Toma cuatro valores vertical_shadow, horizontal_shadow, blur y color. Todos los detalles de las propiedades que toman las propiedades de sombra de texto se encuentran a continuación:
- vertical_shadow: Es la posición de la sombra del texto en forma vertical.
- horizontal_shadow: Es la posición de la sombra del texto horizontalmente.
- desenfoque: Es el valor de cuanta sombra de desenfoque queremos. es opcional
- color: Es el color de la sombra.
Sintaxis:
text-shadow: vertical_shadow horizontal_shadow blur color;
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to specify the width, style,
and color of the rule between columns?
</title>
<style>
.gfg1{
font-size: 50px;
color: rgb(3, 177, 3);
text-shadow: 2px 2px red;
}
.gfg2{
font-size: 50px;
color: rgb(3, 177, 3);
text-shadow: 30px 30px red;
}
</style>
</head>
<body>
<h1 style="margin: 10% 20%;" class="gfg1">GeeksforGeeks</h1>
<h1 style="margin: 10% 20%;" class="gfg2">GeeksforGeeks</h1>
</body>
</html>
Producción:
- Antes de aplicar la propiedad text-shadow:
Ejemplo 2: este ejemplo muestra cómo funciona el valor de desenfoque en la propiedad text-shadow.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to specify the width, style,
and color of the rule between columns?
</title>
<style>
.gfg1{
font-size: 50px;
color: rgb(3, 177, 3);
text-shadow: 2px 2px 4px red;
}
.gfg2{
font-size: 50px;
color: rgb(3, 177, 3);
text-shadow: 30px 30px 4px red;
}
</style>
</head>
<body>
<h1 style="margin: 10% 20%;" class="gfg1">GeeksforGeeks</h1>
<h1 style="margin: 10% 20%;" class="gfg2">GeeksforGeeks</h1>
</body>
</html>
Producción:
-
Antes de aplicar la propiedad de sombra de texto con valor de desenfoque:
-
Después de aplicar la propiedad de sombra de texto con valor de desenfoque:
Publicación traducida automáticamente
Artículo escrito por manikumarsingh789 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA