css - texto - Hacer un<div> con una sombra paralela solo en los lados izquierdo y derecho
sombra interior css (2)
Podrías probar algo como esto:
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
Por supuesto, juega con los valores hasta que te convenga.
Mi objetivo es agregar una sombra a la izquierda y al lado derecho de un #container div , que es de 960px de ancho.
El propio #container contiene un encabezado, un menú de navegación, contenido principal, barra lateral y pie. Pero el propio encabezado sobresale del #container con un ancho personalizado debido a un gráfico.
Como tal, no se agrega una sombra paralela a su derecha e izquierda. Sólo el menú de navegación hacia abajo necesita la caída. Esto se debe a que el encabezado se establece en un ancho personalizado y sobresale más allá del #container . Una sombra a la izquierda y la derecha de una cosa que ya sobresale arruinaría la estética.
Para una mejor visualización, mi sitio se ve similar a http://www.doubleyourdating.com/ , pero el elemento del encabezado sobresale en ambos lados.
He intentado agregar una sombra a la izquierda y al lado derecho del #container , desde el menú de navegación hacia abajo con las siguientes soluciones:
Realicé Photoshop con una imagen de 1px de alto y 1010px de ancho que contiene un "fade" de 25px en los extremos opuestos. He hecho CSS como la
#container div background-image, pero, probablemente debido a que el#containerestá configurado en 960px de ancho, el fondo de 1010px de ancho no se puede mostrar. Tenga en cuenta que cambiar el ancho de 960px creará una cascada de muertes en este sencillo diseño de 2 columnas.Intenté usar CSS en un div de caja de sombra improvisada "alrededor" del div contenedor, pero eso no funciona porque mi encabezado tiene un ancho personalizado que se extiende más ancho que el contenedor.
¿Cómo hago este trabajo?
Una sola línea de código:
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
Simplemente inserta en el elemento de estilo css correspondiente ¡Hecho!