Como lograr efecto layout

Cas1nick · #1 (**permalink**) 16/02/2011, 16:31

Me gustaria saber como podria lograr el efecto del sombreado, que he visto en muchas paginas pero nunca he llegado a saber como lograr dicho efecto sobre la columna central

Aqui os dejo un ejemplo de lo que busco:

gracias

sanxuan · #2 (**permalink**) 16/02/2011, 17:00

La manera más simple es utilizar una imagen en el fondo (propiedad background o background-image) de la página o del contenedor central de la página. Para tonos continuos como en tu imagen se puede usar una imagen de sólo unos píxeles de alto y repetirla verticalmente con background-repeat:repeat-y.

omarMusic · #3 (**permalink**) 16/02/2011, 17:09

Eso se hace con imagenes prediseñadas y se las pone como background en el body:

o podrias intentar con esto

Código HTML:

Ver original<html>
<head>
<style>
.sombra1 {
border-right: 1px solid #499E49; 
margin: auto; 
width:800px; 
overflow: hidden; 
height: 100%;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.60');
-moz-box-shadow: 4px 0px 5px #499E49;
-webkit-box-shadow: 4px 2px 5px #499E49;
box-shadow: 4px 2px 5px rgba #499E49;
}
.sombra2 {
border-left: 1px solid #499E49; 
float: right;
width:790; 
overflow: hidden; 
margin: auto; 
height: 100%;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.60');
-moz-box-shadow: -4px 0px 5px #499E49;
-webkit-box-shadow: -4px 0px 5px #499E49;
box-shadow: -4px 0px 5px rgba #499E49;
}
</style>
</head>
<body>
<div class="sombra1">
    <div class="sombra2">
    </div>
</div>
</body>
</html>

lo de los filtros de ie tendrias q investigar mas pa que funcione en ie mas, bueno esto es una idea

kseso? · #4 (**permalink**) 17/02/2011, 08:37

sólo una pequeña corrección al código de omarMusic, que supongo despiste:

Cita:

box-shadow: -4px 0px 5px rgba #499E49;

si utiliza un valor en rgba la definición es:
rgba (r,g,b, alfa)
donde r,g,b es la notación del color en valores rgb y
alfa es el valor entre 0 y 1 de la transparencia.
Resumiendo, que los valores en rgb no pueden definirse con valores hexadecimales (#fff)

Pero reitero, creo que ha sido un despiste y sólo como desambiguación.