CSS | Efecto de sombra

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:
box shadow property

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *