Para crear una sombra de texto brillante, usaremos HTML para crear la estructura y CSS para el estilo del texto. Con la ayuda de CSS, podemos agregar sombra al texto.
Código HTML: En esta sección, diseñaremos la estructura básica del código.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glowing Text</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello !</h1> <h1>GeeksforGeeks</h1> </body> </html>
Código CSS: en esta sección, usaremos algunas propiedades CSS para diseñar la sombra de texto brillante . La propiedad text-shadow de CSS aplica sombra al texto.
La propiedad CSS text-shadow agrega sombras al texto. Acepta una lista de sombras separadas por comas para aplicar al texto y cualquiera de sus decoraciones. Cada sombra se describe mediante una combinación de compensaciones X e Y del elemento, el radio de desenfoque y el color.
body{
background: black;
}
h1{
margin-top: 150px;
text-align: center;
font-size: 60px;
font-family: 'century gothic';
color: #ffffcc;
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 20px green,
0 0 30px green,
0 0 40px green,
0 0 55px green,
0 0 70px green;
}
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Glowing Text</title>
<style>
body{
background: black;
}
h1{
margin-top: 150px;
text-align: center;
font-size: 60px;
font-family: 'century gothic';
color: #ffffcc;
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 20px green,
0 0 30px green,
0 0 40px green,
0 0 55px green,
0 0 70px green;
}
</style>
</head>
<body>
<h1>Hello !</h1>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nehaahlawat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA