Resumen
Añadir un efecto de sombra a una cabecera con CSS es una forma sencilla pero eficaz de mejorar el diseño de tu sitio web. Las sombras pueden añadir profundidad y hacer que los elementos destaquen, creando un aspecto más pulido y profesional.
Veamos algunas técnicas diferentes para añadir sombras a las cabeceras con CSS.
Añadir CSS a WordPress
Afortunadamente, WordPress te permite añadir CSS personalizado sin necesidad de modificar ningún código, sin necesidad de aprender a acceder al FTP ni a añadir código a un tema. Solo tienes que abrir el Personalizador y copiar y pegar el código en CSS personalizado.
Aquí hay un tutorial en vídeo. cómo añandir CSS personalizado.
Si no estás utilizando el tema Minimalio, es posible que tengas que averiguar la clase CSS correcta para tu cabecera. Puede que sea simplemente «header» o algo diferente. Para averiguarlo, utiliza las herramientas de desarrollo de tu navegador.
Efecto de sombra debajo de la cabecera
Probablemente, esto es lo que estás buscando, una simple sombra que separe la cabecera del resto de la página web.
Para ello, utiliza la propiedad box-shadow.
La forma más habitual de añadir una sombra a una cabecera es utilizando la propiedad box-shadow en CSS. A continuación se muestra un ejemplo básico:
.header {
box-shadow: 0px 8px 24px rgba(149, 149, 149, 0.2);
}
- 0px: Sombra horizontal (derecha si es positiva, izquierda si es negativa) y, como queremos que la sombra esté justo debajo, la ponemos a 0.
- 8px: Sombra vertical (hacia abajo si es positiva, hacia arriba si es negativa), por lo que este es el número importante que define la altura de la sombra.
- 24px: Radio de desenfoque (los valores más altos significan más desenfoque), es decir, cuánto se desenfocará la sombra.
- rgba(149, 149, 149, 0.2): Color de sombra con transparencia. Como puedes ver, estamos usando rgba, donde «a» significa alfa, lo que nos permite hacer que el color sea transparente. Y como los tres primeros números son idénticos, eso significa que hay la misma cantidad de rojo, verde y azul, lo que hace que el color sea gris.
Sombra de la cabecera dentro de la cabecera
Esto es ideal cuando se utiliza una cabecera transparente, pero el fondo no contrasta lo suficiente como para que la cabecera sea visible. Al añadir un fondo con sombra a la cabecera, seguirá pareciendo transparente, pero el logotipo y el menú serán mucho más visibles.
Hay dos opciones, la mejor es utilizar background-gradient, pero también se puede utilizar la propiedad box-shadow con «inset».
Para ello, utiliza el degradado de fondo.
.header{
background: linear-gradient(0deg, rgba(131,130,130,0) 0%, rgba(7,7,7,0.4) 100%)!important
}
El degradado es una regla un poco compleja, porque se pueden hacer muchas cosas con él. En este caso, solo se trata de pasar de un gris más oscuro a completamente transparente. Si quieres crear tu propio degradado, puedes echar un vistazo a esta herramienta y pasar una tarde creando colores bonitos. – https://cssgradient.io/.
Para ello, utiliza una sombra interior.
Si quieres que la sombra aparezca dentro de la cabecera, utiliza la palabra clave inset:
.header {
box-shadow: inset 0px 68px 44px rgba(49, 49, 49, 0.2);
}
Esto crea una sombra que aparece dentro de la cabecera, dándole un aspecto «presionado».
Usar una sombra de texto
Para añadir una sombra específicamente al texto dentro de la cabecera, utiliza la propiedad text-shadow. A mí personalmente no me gusta nada, pero ya sabes, cada uno tiene sus gustos.
Para ello, utiliza una sombra de texto.
.header * {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
Conclusión
Si fuera tú, me quedaría con el efecto de sombra de cabecera de hecha con box-shadow o linear-gradient. Ambas pueden mejorar el diseño de tu sitio web y te permiten crear una amplia gama de efectos visuales. Prueba diferentes tamaños de sombra, colores y radios de desenfoque para encontrar el aspecto perfecto para tu proyecto.
