Foros del Web » Creando para Internet » CSS »

Como lograr efecto layout

Estas en el tema de Como lograr efecto layout en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/02/2011, 16:31
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 13 años, 5 meses
Puntos: 0
Como lograr efecto layout

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
  #2 (permalink)  
Antiguo 16/02/2011, 17:00
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 2 meses
Puntos: 36
Respuesta: Como lograr efecto layout

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.
  #3 (permalink)  
Antiguo 16/02/2011, 17:09
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Como lograr efecto layout

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
  1. .sombra1 {
  2. border-right: 1px solid #499E49;
  3. margin: auto;
  4. width:800px;
  5. overflow: hidden;
  6. height: 100%;
  7. filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.60');
  8. -moz-box-shadow: 4px 0px 5px #499E49;
  9. -webkit-box-shadow: 4px 2px 5px #499E49;
  10. box-shadow: 4px 2px 5px rgba #499E49;
  11. }
  12. .sombra2 {
  13. border-left: 1px solid #499E49;
  14. float: right;
  15. width:790;
  16. overflow: hidden;
  17. margin: auto;
  18. height: 100%;
  19. filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.60');
  20. -moz-box-shadow: -4px 0px 5px #499E49;
  21. -webkit-box-shadow: -4px 0px 5px #499E49;
  22. box-shadow: -4px 0px 5px rgba #499E49;
  23. }
  24. </head>
  25. <div class="sombra1">
  26.     <div class="sombra2">
  27.     </div>
  28. </div>
  29. </body>
  30. </html>

lo de los filtros de ie tendrias q investigar mas pa que funcione en ie mas, bueno esto es una idea
  #4 (permalink)  
Antiguo 17/02/2011, 08:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Como lograr efecto layout

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.

Etiquetas: efecto, layout
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 10:01.