Blur con CSS

DragonX · #1 (**permalink**) 10/02/2007, 09:46

Estoy armando una interface la cual es vertical y quisiera que el div contenedor, osea el div principal, muestre una blur a los costados....

algo asi:

mil gracias por su ayuda!
DX

xik21 · #2 (**permalink**) 10/02/2007, 09:55

quieres hacer un efecto parecido a este web --->pga.com/pgachampionship/2004.
Solo tienes que crearte la imagen y luego el repeat-y.
Creo que nada más.

Saludos

DragonX · #3 (**permalink**) 10/02/2007, 10:30

lo que pasa es que de fondo tengo un degrade y no puedo duplicar la imagen en y porque no sigue el degrade...¿me explico?

Triplexxx · #4 (**permalink**) 10/02/2007, 11:14

No te explicas muy bien xD Yo he hecho algo parecido a eso.

En el codigo html te creas tu contenedor

Cita:

Y en el css la imagen de fondo lo pones en el body y la imagen que quieres poner en los bordes (derexa y izakierda) la pones en contenedor

Cita:

body
{
background: #EEEEEE url(img-practica3/bgg.gif);
.....
.....
}

#contenedor
{
background-image: url(img-practica3/bgcontenedor.gif);
.......
......
}

Ya le das las medidas y todo eso

Salu2

P.D: Espero haberte ayudado xD ya que soy un poco novato aun

P.D.2: Si quieres una imagen de medidas 717 x 16 para probar, lo dices y la subo a cualkier servidor y te paso el link por privado, ya que aqui en el foro no puedo poner link hasta que al menos tenga 30 mensajes

DragonX · #5 (**permalink**) 10/02/2007, 11:51

les dejo la url para que vean a que me refiero....www.urbanchip.com.ar/secobras/ quiero hacer el blur al costado de la tira blanca.....como el fondo es un degrade no puedo utilizar una imagen de fondo que se repita en Y....

GraXXXX

metacortex · #6 (**permalink**) 10/02/2007, 13:14

Es necesario que la sombra llegue hasta abajo? Porque podrías hacerla de tal forma que el degradado se desvanezca a unos 350px. Así la página daría la impresión de que está "levantada" en la parte de arriba. Entre las dos imágenes (izq y der) no creo que te pase de 6kb. Trabaja cada imagen a 20 x 350px.

DragonX · #7 (**permalink**) 10/02/2007, 13:20

oki, lo voy a probar!

Gracias

metacortex · #8 (**permalink**) 10/02/2007, 13:42

Dragon, te resultará algo asi pero mejor trabajado. La diferencia del color entre fondo y contenedor harán el resto del efecto.

Para implementar ese fondo debes hacer un contenedor externo grande (unos 768px). Luego otro que llevará el fondo izquierdo (748), y por último el contenedor normal (748 px también) con el fondo derecho. se verá algo como:

Código HTML:

<body>
<div id="contenedorEx">
  <div id="contenedorMed">
    <div id="contenedor">
    <!-- comienzo del contenido -->