Foros del Web » Creando para Internet » CSS »

sombras en los laterales de un div

Estas en el tema de sombras en los laterales de un div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/10/2011, 11:26
 
Fecha de Ingreso: enero-2009
Mensajes: 40
Antigüedad: 15 años, 10 meses
Puntos: 0
sombras en los laterales de un div

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?
  #2 (permalink)  
Antiguo 07/10/2011, 13:11
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: sombras en los laterales de un div

prueba con la propiedad box-shadow de css3
  #3 (permalink)  
Antiguo 07/10/2011, 13:21
 
Fecha de Ingreso: enero-2009
Mensajes: 40
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: sombras en los laterales de un div

bueno en principio no he usado eso porqué no funciona para ie verdad?
  #4 (permalink)  
Antiguo 07/10/2011, 13:32
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: sombras en los laterales de un div

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>
  #5 (permalink)  
Antiguo 07/10/2011, 14:29
 
Fecha de Ingreso: enero-2009
Mensajes: 40
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: sombras en los laterales de un div

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

Etiquetas: html, sombras, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:59.