Añadir una sombra al inicio de tu web

Tiempo estimado de lectura: 8 minutos

 

Cómo añadir una sombra al inicio de tu web

En el artículo de hoy vamos a ver cómo podemos añadir una sombra al inicio de tu web para darle profundidad al diseño.

Este efecto es muy sencillo de hacer y lo lograremos con un poquito de código CSS, así que vamos a ello.

Código que vamos a utilizar para añadir una sombra al inicio

Como hemos dicho anteriormente, vamos a añadirle una sombra al inicio de nuestra web para darle un efecto destacado a todo el diseño. Si utilizas temas de Genesis o GeneratePress, seguramente habrás visto este efecto más de una vez, pero si no es así, estate atento…

Antes de nada tengo que decirte que el resultado final dependerá un poco de tu tema, podremos ver el efecto justo en la parte superior del tema (debajo de la barra de dirección del navegador), o debajo del menú de navegación.

Sea como sea, y como hemos dicho anteriormente, el código que vamos a utilizar es muy sencillo, es un simple código CSS como el siguiente:

body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
z-index: 100;
}

¿Qué hace este código?

La primera línea del código ya nos dice dónde se va a aplicar la sombre: justo antes del contenido del body, a continuación se le dice que se va a mantener fijo, que la sombra comenzará -10px por el margen superior y que tendrá un tamaño del 100% de la anchura de la página y un tamaño de 10px. Además nos dice que le aplicará una sombra inferior de 10px y que el color de la sombra será negro con una opacidad del 80%. Por último la sombra estará por encima de todo el contenido, al aplicarle un orden de apilamiento de 100.

Cambios que puedes realizar al código

Como este código es muy sencillo, los cambios que puedes realizar, en un principio son muy básicos.

  • Puedes cambiar la anchura (height) de la sombra, pero recuerda igualar ese valor que cambies también en el margen superior (top). Es decir, si quieres tener una sombra de 15px, debes poner height: 15px, pero también top=-15px.
  • También puedes cambiar la extensión de la sombra aumentándola para hacerla más visible. Para ello debes aumentar el siguiente valor del box-shadow: 0px 0 15px rgba(0, 0, 0, 0.8).

El resultado de este efecto sería algo parecido a esto (recuerda que puede cambiar dependiendo de tu tema):

Resultado final de cómo añadir una sombra al inicio de tu página web
Resultado final de cómo añadir una sombra al inicio de tu página web


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *