Sombra en hojas

matiasbmx · #1 (**permalink**) 24/05/2011, 17:03

Hola, quisiera agregarle una sombra lateral a mi hoja, que está hecha por un div con fondo blanco, que quede igual o de este tipo http://bmx.transworld.net/
Gracias de antemano!

slide22 · #2 (**permalink**) 25/05/2011, 02:45

Hola!. Una de las soluciones seria utilizar la propiedad box-shadow y añadirle varias sombras. No he conseguido el efecto tal cual, tambien le da un poco de combra por arriba pero se parece:

div {
-moz-box-shadow:
30px 0 10px 0 #000,
-30px 0 10px 0 #000;
-webkit-box-shadow:
30px 0 10px 0 #000,
-30px 0 10px 0 #000;
}

Otra opcion es con imagenes a los lados del div de esta forma:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
#container{
border: 1px solid #000;
margin:auto;
width: 50%;
}
#principal {
float:left;
width: 70%;
}
#sombra-iz{
background-image: url('sombra-izquierda.jpg');
background-repeat: repeat-y;
float: left;
}
#sombra-de{
background-image: url('sombra-derecha.jpg');
background-repeat: repeat-y;
float:left;
}
#footer{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="sombra-iz"> </div>
<div id="principal">
 
</div>
<div id="sombra-de"> </div>
<div id="footer"> </div>
</div>
</body>
</html>