html - right - cssmatic
Cómo obtener box-shadow solo en los lados izquierdo y derecho (13)
Cualquier forma de obtener box-shadow en los lados izquierdo y derecho (¿horizontal?) Solo sin hacks ni imágenes. Estoy usando:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
Pero da sombra por todas partes.
No tengo fronteras alrededor de los elementos.
NOTA: sugiero revisar la respuesta de @ Hamish a continuación; no implica el "enmascaramiento" imperfecto en la solución descrita aquí.
Puedes acercarte con varias sombras de caja; uno para cada lado
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
Editar
Agregue 2 sombras de recuadro más para la parte superior e inferior delantera para enmascarar el sangrado.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
NICE SHOW DE INSETOS EN LADOS IZQUIERDO Y DERECHO PARA INMERSIONES, IMÁGENES O CONTENIDOS INTERNOS
Para una buena sombra de inserción en los lados derecho e izquierdo de las imágenes, o cualquier otro contenido, úselo de esta manera
*** El índice z: -1 hace un buen truco al mostrar imágenes u objetos internos con inserciones
<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
<style>
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}
</style>
</html>
Enfoque clásico: propagación negativa
CSS box-shadow usa 4 parámetros: h-shadow, v-shadow, blur, spread:
box-shadow: 10px 0 8px -8px black;
El v-shadow ( sombra verical) se establece en 0.
El parámetro de desenfoque agrega el efecto degradado, pero también agrega una pequeña sombra en los bordes verticales (del que queremos eliminar).
La propagación negativa reduce la sombra en todos los bordes: puedes jugar con ella tratando de eliminar esa pequeña sombra vertical sin afectar demasiado el que está a los lados (es más fácil para las sombras pequeñas, de 5 a 10 px).
Aquí un ejemplo de fiddle .
Segundo enfoque: div absoluta en el lado
Agregue un div vacío en su elemento y ajústelo con una posición absoluta para que no afecte el contenido del elemento.
Aquí el fiddle con un ejemplo de izquierda-sombra.
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}
Tercero: sombra de enmascaramiento
Si tiene un fondo fijo, puede ocultar el efecto de sombra lateral con dos sombras de máscara que tienen el mismo color del fondo y desenfoque = 0, por ejemplo:
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadow
He añadido nuevamente una extensión negativa (-3px) a la sombra negra, para que no se extienda más allá de las esquinas.
Aquí el fiddle .
En algunas situaciones puedes ocultar la sombra por otro contenedor. Por ejemplo, si hay un DIV por encima y por debajo del DIV con la sombra, puede usar position: relative; z-index: 1; position: relative; z-index: 1; en los DIVs circundantes.
Esto funciona bien para todos los navegadores:
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
Intenta esto, está funcionando para mí:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
Otra forma es con: overflow-y:hidden en el padre con relleno.
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
Otra idea podría ser crear un pseudo-elemento borroso oscuro eventualmente con transparencia para imitar la sombra. Hazlo con un poco menos de altura y más ancho ig
Puedes usar 1 div dentro de eso para "borrar" la sombra:
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}
Puedes jugar con "height:%;" y "width:%;" para borrar que sombra quieres.
Sé que esto es una adición tardía, pero no estaba satisfecho con la parte superior e inferior redondeadas de la sombra presente en la solución de Deefour que creó la mía.
Insertar box-shadow; crea una bonita sombra uniforme con la parte superior e inferior cortadas:
box-shadow: -15px 0 15px -15px inset;
Para usar este efecto en los lados de su elemento, cree dos pseudo elementos :before y :after posicionarse absolutamente en los lados del elemento original.
div {
position: relative;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
etc...
Solo para horizontal, puede engañar a la sombra de cuadro usando el desbordamiento en su div padre:
<div class="parent">
<div class="box-shadow">content</div>
</div>
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}
Debes usar la box-shadow; múltiple box-shadow; . La propiedad insertada hace que se vea bien y adentro.
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
box-shadow: box-shadow: 0 5px 5px 0 #000;
Funciona de mi lado. Esperanza, te ayuda.