sombras en los laterales de un div

DMH1983 · #1 (**permalink**) 07/10/2011, 11:26

bien he intentado poner sombras a los laterales de un div de diversas maneras..

creando 3 divs.. 2 con degradados y 1 contenedor.. con problemas cuando crecia el div contenedor..

después pense en poner un fondo a body y otro dentro de un div anidado en body y dentro colocar el contenedor..

Código:

<html>
	<head>
	</head>


	<body style="width:1200px;background-image:url('degraizq.png');background-repeat:repeat-y;background-position:left top; margin:0 auto;border: 1px solid black;" >
		<div style="width:100%;height:100%; background-image:url('degrader.png');background-repeat:repeat-y;background-position: right top;border:1px solid red;">
		</div>


	</body>

</html>

no he conseguido que nada funcione en condiciones.. alguien me puede dar alguna pista para solucionar esto?

IsaBelM · #2 (**permalink**) 07/10/2011, 13:11

prueba con la propiedad box-shadow de css3

DMH1983 · #3 (**permalink**) 07/10/2011, 13:21

bueno en principio no he usado eso porqué no funciona para ie verdad?

IsaBelM · #4 (**permalink**) 07/10/2011, 13:32

no es aceptado en ie8-. si esto te preocupa, tendrás que usar imágenes. este código es para bordes redondeados, pero la base es la misma para lo que te ocupa

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.contenedor {
height: auto;
border: 1px solid transparent;
margin: 0 auto;
padding: 0;
position: relative;
}

.centro {
background:url('borderedondeadocentro.gif') repeat-x top left;
color: #c5c5c5;
font: bold 15px verdana;
height: 35px;
margin: 0;
text-align: left;
padding: 6px 20px;
width: auto;
position: absolute;
top: 0;
right: 6px; /* el ancho de las imágenes laterales */
left: 6px; /* el ancho de las imágenes laterales */
}

.cerrar:after {
color: #c5c5c5;
font: bold 12px verdana;
float: right;
content: "X";
border: 1px solid #c5c5c5;
}

.izq {
background:url('borderedondeadoleft.gif') no-repeat top left;
height: 35px;
position: absolute;
top: 0;
right: 0;
left: 0;
}

.der {
background:url('borderedondeadoright.gif') no-repeat top right;
height: 35px;
position: absolute;
top: 0;
right: 0;
left: 0;
}

.contenido {
background-color: #5B5B5B;
font: 12px verdana;
color: #c5c5c5;
border: 1px solid #848484;
width: auto;
margin-top: 35px; /* largo de la imágenes */
padding: 10px 7px;
}
</style>
</head>
<body>
<div class="contenedor" style="width: 500px;">
<div class="izq"></div>
<div class="centro cerrar">Título</div>
<div class="der"></div>
<div class="contenido">Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
</div>
</body>
</html>

DMH1983 · #5 (**permalink**) 07/10/2011, 14:29

gracias al final el resultado (són pruebas)

Código:

<html>
   <head>
   </head>
   <body style="margin:50 50;text-align:center;">

   <div style="width:900px; height:auto; border:1px solid black; position:relative;">
   <div style="background:url('degraizq.png') repeat-y; height:100%; width:10px;position:absolute; top:0; left:0;">
	</div>
   	<div style="background:url('degrader.png') repeat-y top right; height:100%;width:10px;position:absolute;top:0;right:0;">
   	</div>
	<div style="width:880px;height:auto;border:2px solid red; margin:0 auto;">
		<br><br><br><br><br><br><br><br><br><br>hola<br><br><br><br>Hola<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hola<br><br><br><br>Hola<br><br><br><br><br><br><br><br><br><br>hola<br><br><br><br>Hola
	</div>
   </div>


</body>
</html>

Parece que funciona bien y que los degradados se estiran con el contenido