7

Añadiendo sombra debajo de nuestro header.

Hola a todos 😃

Hoy les vengo a compartir cómo le añadí sombra a mi header para estilizar más mi portafolio.

Primero, les dejo esta página para que hagan su box-shadow a su gusto: Box Shadow CSS

Nos ubicaremos dentro de nuestra clase “header” y escribiremos el siguiente código:

-webkit-box-shadow: 0px14px10px -6px#000000; 
box-shadow: 0px14px10px -6px#000000;

Verás que no se ve nada de sombra, eso es porque la sección que está debajo de él lo tapa, esto se soluciona de la siguiente manera.

Nos ubicamos debajo del código del box-shadow y definimos una posición relativa.

position: relative;
z-index: 1;

De esta manera se logrará apreciar la sombra y le daremos un estilo más genial a nuestro portafolio 😃
header.jpg

inb4: mis imagenes son de prueba, las tengo que cambiar XD

Escribe tu comentario
+ 2
Ordenar por:
1
9589Puntos
5 años

Excelente aporte, gracias por compartir.

1
2031Puntos
5 años

Yo no tuve la necesidad de utilizar z-index…!Anotación 2020-07-31 201700.jpg)