Foros del Web » Creando para Internet » CSS »

Background degradado

Estas en el tema de Background degradado en el foro de CSS en Foros del Web. Saludos: Hay alguna forma de poner un background a toda la pagina que sea degradado (por ejemplo de rojo a blanco), sin necesidad de usar ...
  #1 (permalink)  
Antiguo 29/01/2008, 13:35
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Background degradado

Saludos:

Hay alguna forma de poner un background a toda la pagina que sea degradado (por ejemplo de rojo a blanco), sin necesidad de usar una imagen?
__________________
El aprendiz.
  #2 (permalink)  
Antiguo 29/01/2008, 13:59
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Background degradado

mmm si lo quieres hacer horizontal podrías hacer la parte de arriba del degradado y dejar el background de abajo con el color de abajo del degradado.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 29/01/2008, 14:19
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Re: Background degradado

no te entendi, yo quiero un degradado vertical.
__________________
El aprendiz.
  #4 (permalink)  
Antiguo 29/01/2008, 14:30
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Background degradado

a ver pon un ejemplo de como quieres el degradado, 1 imagen.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 29/01/2008, 15:03
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Re: Background degradado

Aqui hay un ejemplo de como lo quiero
__________________
El aprendiz.
  #6 (permalink)  
Antiguo 29/01/2008, 15:24
 
Fecha de Ingreso: enero-2008
Mensajes: 7
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Background degradado

no quedaría asi exactamente
pero puedes hacer una imagen arriba degradada y otra al pie, y todo el fondo en un color intermedio. No se si me explico
O si no hacer un degrtadado vertical de un par de px de ancho, repetirlo en x y dejarlo fixed... pero no es muy elegante, no creo que sea lo que buscas
  #7 (permalink)  
Antiguo 29/01/2008, 15:42
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Background degradado

podrías repetir esa imagen con repite-x y dejar un background blanco, y si quieres mas degradado haces mas grande la imagen.
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 29/01/2008, 20:01
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 meses
Puntos: 4
Re: Background degradado

Yo suelo usar imagenes de 1 pixel x (lo que sea necesario), si es un degradado a lo vertical como la imagen que has puesto. Por ejemplo si tu pagina va a ocupar 700 px de alto seria 1 x 700 la imagen, y luego que se repita el eje X. La herramienta de selecion pixel unico del fotochop viene bien para esas tareas, no se si habra otras formas de hacerlo, pero a mi me va bien asi.
  #9 (permalink)  
Antiguo 30/01/2008, 02:38
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Background degradado

Hola:

La verdad es que sin imágenes y que ocupe toda la página creo que es muy trabajoso y dudo de que en todos los navegadores vaya bien, pero te voy a intentar explicar la parte teórica:

En primer lugar debes conocer todos los colores intermedios; en el enlace se consigue automáticamente con javascript, pero sin saber el tamaño exacto y sin lenguajes de programación tiene que ser una tarea muy ardua.
Para 100 colores tendrías que tener 100 capas cuyo z-index sea menor que los elementos de la página, y deberían definirse más o menos:
.fondo {position: absolute; width: 100%; height: 1%; left: 0; z-index: -1;}
#fondo0 {top: 0%; background-color: #000000;}
#fondo1 {top: 1%; background-color: #000001;}
...
#fondo99 {top: 99%}

Y luego las capas:
<div class="fondo" id="fondo0">
<div class="fondo" id="fondo1">
<div class="fondo" id="fondo2">

Los fondos debes calcularlos...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 30/01/2008, 03:02
 
Fecha de Ingreso: marzo-2007
Mensajes: 274
Antigüedad: 10 años, 8 meses
Puntos: 2
Re: Background degradado

habia un javascript k lo acia, ahora no recuerdo de donde lo sake
__________________
gifts4kids.es
  #11 (permalink)  
Antiguo 30/01/2008, 07:55
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 6 meses
Puntos: 8
Re: Background degradado

Muchas gracias por su interes, pero en conclusión me parece que lo mas rápido y menos complicado seria lo que escribe feral. Asi lo hice y no ocupa mucho espacio y carga rápido.
__________________
El aprendiz.
  #12 (permalink)  
Antiguo 30/01/2008, 08:02
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: Background degradado

La mejor opción es la propuesta por hades87. Usar una imagen degradada y terminar con un color generado por html:

Código:
background: url(fondo.jpg) #ffffff repeat-x;
La imagen puede ser hasta de 1px de ancho, lo cual resultaría muy liviano en kb.
  #13 (permalink)  
Antiguo 30/01/2008, 16:22
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Background degradado

Cita:
Iniciado por juandedios Ver Mensaje
... sin necesidad de usar una imagen?
Cita:
Iniciado por feral Ver Mensaje
Yo suelo usar imagenes de 1 pixel...
Cita:
Iniciado por juandedios Ver Mensaje
Muchas gracias por su interes, pero en conclusión me parece que lo mas rápido y menos complicado seria lo que escribe feral. Asi lo hice y no ocupa mucho espacio y carga rápido.
Hola: La opción de la imagen no la propuse porque era tu planteamiento, pero si te valen las imagenes (y tal vez los scripts) fíjate en esta página: Gradientes (php + librerías GD)... también puedes ver este artículo: Gradientes

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 04/03/2008, 13:35
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Background degradado

Hola todos :

agrego un par de enlaces

superponer dos fondos

Fondo degradado

Fondo degradado
  #15 (permalink)  
Antiguo 04/03/2008, 14:01
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Background degradado

mira la fecha del post furoya :\, ya hace mas de un mes
__________________
No diseñes usando tablas.
  #16 (permalink)  
Antiguo 07/03/2008, 14:01
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Background degradado

¿Y?

...

Bueno, ya que volví aprovecho para poner algún enlace más. Así nadie va a decir que pongo mensajes inútiles

Opacidad degradada en Firefox ( como alpha (type=) )

Degradado PNG sobre imagen de fondo en IE

Siempre habrá algo nuevo para sacarles.
  #17 (permalink)  
Antiguo 24/06/2008, 01:36
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Background degradado

Gracias por los enlaces ;)
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
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 18:31.