La propiedad de efecto de sombra en CSS se usa para agregar sombra de texto e imágenes en un documento HTML.
Sombra de texto: la propiedad de sombra de texto CSS se utiliza para mostrar el texto con sombra. Esta propiedad contiene la longitud, el ancho y el ancho de píxeles de la sombra y el color de la sombra.
Sintaxis:
Text-shadow: 3px 3px 3px green;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>text-shadow property</title>
<style>
h1 {
color: green;
text-shadow: 3px 3px 3px lightgreen;
}
</style>
</head>
<body>
<h1>Geeks For Geeks | A computer Science portal for Geeks</h1>
</body>
</html>
Producción:
TextBox Shadow: la propiedad CSS boxShadow aplica sombra al cuadro de texto. Esta propiedad mantiene la longitud, el ancho y el ancho de píxeles de la sombra y el color de la sombra.
Sintaxis:
boxShadow: 3px 3px 3px green;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>box shadow property</title>
<style>
#Gfg {
width: 220px;
height: 50px;
background-color: green;
color: white;
}
</style>
<script>
// function that show Shadow Effect.
function Shadow() {
document.getElementById("Gfg").style.boxShadow
= "5px 5px 5px gray";
}
</script>
</head>
<body>
<button onclick = "Shadow()">Click to see Shadow</button>
<div id = "Gfg">
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Naman_Garg y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA