Cajas con box-shadow compartido

frlawer · #1 (**permalink**) 09/03/2012, 15:24

hola a todos..espero puedan ayudarme a conseguir la solución a mi duda..

empecemos..
imaginemos q tenemos dos capas, una arriba de la otra..
y quiero agregarle una sombra a las dos pero como están unidas entre si las sombras se superponen sobre las capas..
alguien podría darme alguna solución para que por lo menos visualmente las dos sombras parezcan una?

ejemplos:

Código HTML:

<html>
<head>
<style type="text/css">
.capa{
	width:100px;
	height:100px;
	display: block;
}
#capa1{
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	box-shadow:0 10px 10px black;
}
#capa2{
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	box-shadow:0 10px 10px black;
}
</style>
</head>
<body>
	<div class="capa" id="capa1"></div>
	<div class="capa" id="capa2"></div>
</body>
</html>

alguien puede darme una mano..yo se q lograron resolverlo..
muchas gracias.

xFantaSx · #2 (**permalink**) 09/03/2012, 16:11

Quieres que en la unión de las dos capas sólo aparezca una sobra? o sea, que aparezca la sobra del borde superior del div inferior o la sombra del borde inferior del div superior?.

frlawer · #3 (**permalink**) 09/03/2012, 16:18

Cita:

Iniciado por xFantaSx

Quieres que en la unión de las dos capas sólo aparezca una sobra? o sea, que aparezca la sobra del borde superior del div inferior o la sombra del borde inferior del div superior?.

no lo que deseo es q no se vea la sombra de las dos cajas en el medio..
nose si me explico..
q la sombra no se superposicione sobre la capa de abajo y visceversa

xFantaSx · #4 (**permalink**) 09/03/2012, 16:33

Pues una solución podría ser que crearas un div contenedor y a este le aplicaras la sombra, luego en el insertas las otras dos capas posicionadas sin sombra, y quedaría como creo que quieres.

frlawer · #5 (**permalink**) 09/03/2012, 17:03

y si te digo q no puedo cambiar las cajas? si o si tengo q lograr ese efecto xq asi es la plantilla y sino tendria q volver a programar todo de nuevo..XD

ademas son muchos div apilados..

Código:

<div>//imposible aplicar a esta capa..
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

xFantaSx · #6 (**permalink**) 09/03/2012, 17:19

Hola, prueba con este codigo:

Código HTML:

Ver original<html>
<head>
<style type="text/css">
.capa{
    width:100px;
    height:100px;
    display: block;
}
* {
    padding:20px;
}
#capa1{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    box-shadow: rgba(200, 200, 200, .6) -4px -4px 5px ,
                rgba(200, 200, 200, .6) 4px -4px 5px ;
 
 
}
#capa2{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    box-shadow: rgba(200, 200, 200, .6) 4px 4px 5px,
                rgba(200, 200, 200, .6) -4px 4px 5px ;
    margin-top:-8px;
 
}
</style>
</head>
<body>
    <div class="capa" id="capa1"></div>
    <div class="capa" id="capa2"></div>
</body>
</html>

frlawer · #7 (**permalink**) 09/03/2012, 17:59

Cita:

Iniciado por xFantaSx

Hola, prueba con este codigo:

Sos un genio..

Sabes q estaba probando de colocarle otra sombra blanca como me sugeriste..pero no me salia..

esto me soluciona perfectamente las dudas..
ademas sirve agregando todos las capas q sean..

Muchísimas gracias hermano..

kseso? · #8 (**permalink**) 09/03/2012, 18:26

Si le añade el 4º valor numérico (distancia de propagación -spread distance-) ya le quedará bordada.
Quizás encuentre de utilidad este artículo http://bit.ly/wOC0c8 para comprender mejor la propiedad box-shadow.