1 solo color de fondo con 2 colores

[Eztopa]

me gustaria saber como puedo hacer para que un bgcolor este formado por dos colores, me gustaria que la parte superior fuese negra y que vaya cambiando progresivamente de color hasta convertirse en rojo en la parte inferior(Un degradado vamos), no se si es posible, vi un efecto parecido en www.dynamicdrive.com pero era con una barra de color, si alguien sabe un efecto parecido o un javascript o algo estaria agradecido.
También me gustaria que ese color ocupase siempre el 100% del fondo sea cual sea la resolucion del usuario.
Gracias

[caricatos]

Hola Eztopa:

Si solo te interesar en explorer, he visto que hay un filtro (algo así como gradiante), pero si quieres hacer que te valga para cualquier browser, tal vez se pueda hacer un script, generando una capa que se pueda ubicar de fondo, con un bucle de los colores intermedios...

Hice algo parecido en esta página

Al final de la página hay tres barras que dan el efecto de degradado, y está implementado con un script.

Si te decantas por la segunda versión, te puedo ayudar a hacerlo.

Saludos

[Eztopa]

Saludos caricatos :), he visto tu web y tienes unas caricaturas bastante interesantes.
En efecto, me interesa la segunda opcion, que se pueda visualizar en todos los navegadores.
Este es el codigo que he encontrado:

<script language="JavaScript1.2">
<!--

/*
Gradient Bar Script (By Alex Szorkovszky [email protected])
Permission granted to Dynamicdrive.com to feature script in archive
For full source code and installation instructions to this script, visit http://dynamicdrive.com
*/

if (document.all){
one=new Array();
two=new Array();
var a=10;var b=11;var c=12;var d=13;var e=14;var f=15;


//configure gradient

//width and height of gradient
var width = 640;
var height = 480;

//no of pixels between colours
var gap = 5;

//0 for horizontal, 1 for vertical
var direction = 1;

//colour number 1 - enter 1st, 3rd and 5th numbers/letters of colour code
one[0]=0;
one[1]=0;
one[2]=0;

//colour number 2 - enter 1st, 3rd and 5th numbers/letters of colour code
two[0]=f;
two[1]=f;
two[2]=f;


//end configuration


if(direction==0) var num = width / gap;
if(direction==1) var num = height / gap;
color2=new Array();
color1=new Array();
diff=new Array();
for(i=0;i<3;i++) {
diff[i] = two[i] - one[i];
diff[i] = diff[i] / num;
}
for(i=0;i<3;i++){
color1[i] = Math.round(diff[i] * Math.pow(10, 0));
if(color1[i] > diff[i])color1[i] = color1[i] - 1;
color2[i] = diff[i] - color1[i];
color2[i] = color2[i] * 15;
color2[i] = Math.round(color2[i] * Math.pow(10, 0));
}
x=new Array();
two[0]=0;
two[1]=0;
two[2]=0;
document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+width+'" height="'+height+'">');
if(direction==0) document.write('<tr>');
for(i=0;i<=num;i++) {
if(direction==1) document.write('<tr>');
document.write('<td bgcolor="#');
for(j=0;j<3;j++) {
if(one[j]==a)document.write("a");
if(one[j]==b)document.write("b");
if(one[j]==c)document.write("c");
if(one[j]==d)document.write("d");
if(one[j]==e)document.write("e");
if(one[j]==f)document.write("f");
if(one[j]<10)document.write(one[j]);
if(two[j]==a)document.write("a");
if(two[j]==b)document.write("b");
if(two[j]==c)document.write("c");
if(two[j]==d)document.write("d");
if(two[j]==e)document.write("e");
if(two[j]==f)document.write("f");
if(two[j]<10)document.write(two[j]);
one[j] = one[j] + color1[j];
two[j] = two[j] + color2[j];
if(two[j]>15) {
two[j] = two[j] - 15;
one[j]++;
}
}
if(direction==0) document.write('" width="'+gap+'" height="'+height+'">&nbsp;</td>');
if(direction==1) document.write('" width="'+width+'" height="'+gap+'">&nbsp;</td></tr>');
}
document.write('</table>');
}
//-->
</script>

Ahora lo que me gustaria es que ese gradiente ocupara todo el fondo en direccion vertical, y que se adaptara segun la resolucion de pantalla (1024, 800, etc..)
Si me puedes echar una mano te estaria muy agradecido.
Gracias

[caricatos]

Hola otra vez:

Espero que no importe que dé una solución javascript, tal vez puedan ayudarme...

La verdad es que me resulta difícil, leer código de otros, así que trataré de ir haciéndolo de a poco:

La idea que tengo es usar una capa de fondo con la tabla del degradado (también pienso que podrían usarse otros tags), que esté vacía en un principio, y luego, averiguar las propiedades
clientWidth y clientHeight para averiguar los tamaños, para luego mediante un script fabricar el fondo...

Si tienes alguna idea, cuéntala...

Voy a hecer unas pruebas, y si nadie te dá mejor respuesta, seguimos.

[caricatos]

Hola otra vez:

Aquí conseguí el efecto del negro al rojo:

Código PHP:

  <html> 
<head> 
<title> 
    Degradado 
</title> 
<script language=javascript> 
function color(n)    { 
    return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16)); 
} 
 
function ini()    { 
    var elFondo = document.getElementById("fondo").style; 
    var ancho = document.body.clientWidth; 
    var alto =  document.body.clientHeight; 
    elFondo.width = ancho; 
    elFondo.height = alto; 
    var altoCelda = alto / 256; 
    var tabla = "<table cellpadding=0 cellspacing=0 width=100%>"; 
    for (var i = 0; i < 256; i ++) 
        tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: #" + color(i) + "0000' ></td></tr>" 
    tabla += "</table>"; 
    document.getElementById("fondo").innerHTML = tabla; 
} 
</script> 
</head> 
<body style="background-color:red; margin:0" onload=ini()> 
<div style="position: relative"> 
<div id=fondo style="position:absolute; top:0; left:0;"></div> 
<div id=general style="position:absolute; top:0; left:0;"> 
<table> 
<tr> 
<td > 
Tabla sin importancia 
</td></tr></table> 
<div> 
</div> 
</body> 
</html>  
  

Si lo quieres del rojo al negro el bucle debería ser inverso.

Espero que te sirva...

Saludos

[Eztopa]

gracias caricatos es exactamente lo que buscaba!!!!
pero aun no comprendo muy bien qué variables tendría que cambiar para cambiar yo mismo los colores y elegir otros si quisiera. Ya sabes del tipo #000000 y #ffffff

Gracias :) y Saludos

[caricatos]

Bien...

Te comentaré 2 cosas:
1º: Acabo de editar el código para cerrar unas comillas que se me habían pasado en el div "fondo"...

2º: En la siguiente línea:

tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: #" + color(i) + "0000' ></td></tr>"

Fíjate que detrás de background-color está ésto:
: #" + color(i) + "0000'>..."

los colores son #RRGGBB o sea que los dos primeros dígitos hexadecimales son para el componente rojo (red)... y en este caso son los que van cambiando con la función color que devuelve en formato hexadecimal el valor decimal del parámetro.
Luego siguen las componentes verdes (GG) y azules (BB)... en este ejemplo solo varían las tonalidades rojas, pero se puede jugar con más tonalidades... si quisieras que fuese fondo azul sería:
#0000 + color(i).

Creo que el secreto está en hacer pruebas o hecer un estudio de desde que valor inicial a valor final quieres que cambie.

Espero que te sirva...

Saludos

[tunait]