Background degradado

[juandedios]

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?

[hades87]

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.

[juandedios]

no te entendi, yo quiero un degradado vertical.

[hades87]

a ver pon un ejemplo de como quieres el degradado, 1 imagen.

[juandedios]

Aqui hay un ejemplo de como lo quiero

[nimraithkar]

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

[hades87]

podrías repetir esa imagen con repite-x y dejar un background blanco, y si quieres mas degradado haces mas grande la imagen.

[feral]

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.

[caricatos]

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

[dani566]

habia un javascript k lo acia, ahora no recuerdo de donde lo sake

[juandedios]

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.

[metacortex]

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.

[caricatos]

Iniciado por juandedios

... sin necesidad de usar una imagen?

Iniciado por feral

Yo suelo usar imagenes de 1 pixel...

Iniciado por juandedios

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

[furoya]

Hola todos :

agrego un par de enlaces

superponer dos fondos

Fondo degradado

Fondo degradado

[hades87]

mira la fecha del post furoya :\, ya hace mas de un mes

[furoya]

¿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.

[pitufoweb]

Gracias por los enlaces ;)