Answer

1. 

   davy.ai

   July 11, 2023 at 11:22 am

   Replicando Sombras en Divs de Tarjetas usando HTML/CSS o SCSS

   Si desea replicar las sombras debajo de los div de tarjetas mostradas en la imagen, aquí hay algunas sugerencias sobre cómo lograrlo:

   Usando HTML/CSS

   Una forma de agregar las sombras es usando la propiedad box-shadow de CSS. Puede utilizar el siguiente código para lograr un efecto similar:

   .card {
     box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12), 
                 0px 2px 2px rgba(0, 0, 0, 0.24);
   }
   

   Este código agrega dos sombras al div de la tarjeta: una con un radio de expansión más grande y otra con uno más pequeño. La primera sombra es más clara y crea un efecto de resplandor externo suave, mientras que la segunda es más oscura y ofrece una línea más distintiva en el límite de la tarjeta.

   Si desea crear un efecto similar a las sombras apiladas en la imagen, puede crear múltiples divs con el mismo box-shadow y luego usar position:relative y z-index para apilarlos uno encima del otro. Puede utilizar el siguiente código como ejemplo:

   <div class="shadow-card">
     <div class="shadow"></div>
     <div class="shadow"></div>
     <div class="card"></div>
   </div>
   

   .shadow-card {
     position:relative;
     z-index:1;
   }
   
   .shadow {
     position:absolute;
     z-index:-1;
     top:2px;
     left:2px;
     right:2px;
     bottom:2px;
     box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12), 
                 0px 2px 2px rgba(0, 0, 0, 0.24);
   }
   
   .card {
     position:relative;
     z-index:1;
     background-color:#fff;
     padding:20px;
     border-radius:4px;
   }
   

   Este código crea un div contenedor shadow-card que tiene position:relative y z-index para definir su contexto de apilamiento. Luego hay dos divs shadow que tienen position:absolute, z-index: -1 y box-shadow aplicado para crear el efecto de sombra. Finalmente, hay un div card que tiene un fondo blanco, border-radius y padding para crear la apariencia de la tarjeta.

   Usando SCSS

   Si desea usar SCSS para crear el efecto de sombra, puede utilizar mixins para simplificar el código y hacerlo más mantenible. Aquí tiene un ejemplo de cómo hacerlo:

   @mixin card($size, $bg-color: #fff, $border-radius: 4px) {
     background-color: $bg-color;
     padding: $size;
     border-radius: $border-radius;
     position: relative;
     z-index: 1;
   }
   
   @mixin shadow($spread: 2px, $blur: 3px, $alpha: 0.24) {
     box-shadow: 0 $spread $blur rgba(0, 0, 0, $alpha);
   }
   
   .shadow-card {
     position:relative;
     z-index:1;
   
     @for $i from 1 through 5 {
       .shadow:nth-child(#{$i}) {
         position:absolute;
         z-index:-1;
         top:#{$i}px;
         left:#{$i}px;
         right:#{$i}px;
         bottom:#{$i}px;
   
         @include shadow($i + 1, $i + 2);
       }
     }
   
     .card {
       @include card(20px);
     }
   }
   

   Este código crea dos mixins: card y shadow. El mixin card recibe tres argumentos: $size, $bg-color y $border-radius, y establece las propiedades de color de fondo, padding, border-radius, position y z-index para el elemento card. El mixin shadow recibe tres argumentos: $spread, $blur y $alpha, y establece la propiedad box-shadow para el elemento shadow.

   A continuación, se encuentra el div contenedor shadow-card que tiene position:relative y z-index para definir su contexto de apilamiento. Dentro de él, hay un bucle que crea varios divs shadow que se posicionan con respecto al div contenedor y tienen aplicado un box-shadow. También se les otorga un tamaño diferente en función de la iteración actual del bucle. Finalmente, hay un div card que utiliza el mixin card para establecer su apariencia.

   Al utilizar este código, puede ajustar fácilmente el tamaño y la apariencia de los elementos card y shadow cambiando los argumentos pasados a los mixins.

   Espero que esto te sea útil. ¡Diviértete experimentando con diferentes estilos!

Comments are closed.