Foros del Web » Creando para Internet » CSS »

Blur con CSS

Estas en el tema de Blur con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/02/2007, 09:46
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Blur con CSS

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
  #2 (permalink)  
Antiguo 10/02/2007, 09:55
 
Fecha de Ingreso: febrero-2007
Mensajes: 19
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Blur con CSS

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
  #3 (permalink)  
Antiguo 10/02/2007, 10:30
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Blur con CSS

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?
  #4 (permalink)  
Antiguo 10/02/2007, 11:14
Avatar de Triplexxx  
Fecha de Ingreso: febrero-2007
Ubicación: Frente el PC
Mensajes: 19
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Blur con CSS

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

En el codigo html te creas tu contenedor

Cita:
<body>

<div id="contenedor">


</div>

</body>
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
  #5 (permalink)  
Antiguo 10/02/2007, 11:51
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Blur con CSS

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
  #6 (permalink)  
Antiguo 10/02/2007, 13:14
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Blur con CSS

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.
  #7 (permalink)  
Antiguo 10/02/2007, 13:20
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Blur con CSS

oki, lo voy a probar!

Gracias
  #8 (permalink)  
Antiguo 10/02/2007, 13:42
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Blur con CSS

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 --> 
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:15.