Crear sombras
Profesor: Javier López
Volver
Propuesta de la actividad
Sombras en las cajas (<div>)
Resultado final

Sombras en las cajas (<div>)
Vamos a añadir una leve sombra en cada uno de los 3 <article>.
Para ello vamos a añadir una sola línea de código CSS en el selector del tema anterior.
estilos.css
.cuadros{
   width:240px;
   border:1px lightgray solid;
   border-radius:3px;
   background-color:white;
   text-align:center;
   padding:5px 5px 22px 5px;
   box-shadow:0px 0px 4px gray;
}


Únicamente comentamos la nueva línea (coloreada de rojo):

box-shadow: 0px 0px 4px gray; añade una sombra a la caja (box) con los siguientes parámetros:
El primer 0px indica el desplazamiento horizontal de la sombra, como es 0 se coloca justo detrás del cuadro.
El segundo 0px indica el desplazamiento vertical de la sombra, como es 0 se coloca justo detrás del cuadro.
4px indica la intensidad-grosor de la sombra. A más cantidad más sombra.
gray indica el color de la sombra (color que se mostrará degradado).


Haz clic aquí para , o bien en el siguiente botón para acceder al siguiente tema donde vamos a