color de fondo degradado????

fobos · #1 (**permalink**) 06/06/2004, 18:24

hola, tengo una duda... hay algún código para hacer q el color de fondo de una página se vaya degradando??

Barba · #2 (**permalink**) 06/06/2004, 19:26

Hola fobos, para que se produzca ese efecto, tienes que poner como imagen de fondo una imjagen jpg o gif como esta que te mando, ( http://lihuen.com/fondogrisdegrade3.jpg) puede ser vertical u horizontal, esta es vertical y la uso en varias páginas.
Normalmente miden no más de 4 pxls de ancho para que no pese mucho, si es un degrade horizontal tiene que medir más o menos 2x850, para hacer la imagen tienes que usar algún programa como Corel o Adobe.
Cualquier duda estoy para ayudarte.-
barba.-

fobos · #3 (**permalink**) 06/06/2004, 20:27

muchas gracias por la info, barba... de hecho tengo una así como fondo de mi sitio, pero quería saber si esto era posible con un código html o javascript

gracias nuevamente y saludos

seoista · #4 (**permalink**) 06/06/2004, 23:26

Hola fobos

Cita:

Iniciado por fobos

pero quería saber si esto era posible con un código html o javascript

gracias nuevamente y saludos

Este fondo degradado esta hecho con STYLE (me lo pasó caricatos):

Código PHP:

  <html>

<head>

 
<title></title>

 
<style type="text/css">

.fondo{

width:100%;height:100%;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#336699, endColorstr=#FFFFFF, 

 
GradientType=1)

}

</style>

 
</head>

 
<body class="fondo">

 
RESTO DE LA PAGINA

 
</body>

</html>

Espero que sea lo que buscas.

Saludos

caricatos · #5 (**permalink**) 07/06/2004, 00:45

Hola a todos

:

Cita:

Iniciado por seoista

Hola fobos
Este fondo degradado esta hecho con STYLE (me lo pasó caricatos):

Saludos

Me temo que seoista se ha equivovado, ya que no suelo usar filtros porque son exclusivos de microsoft ... (aunque mozilla implementa algunas cosillas equivalentes)

Aunque es cierto que he hecho algo, y lo puse en las FAQs de javascript: http://www.forosdelweb.com/showpost....&postcount=129

Saludos

seoista · #6 (**permalink**) 07/06/2004, 06:15

Cita:

Iniciado por caricatos

Me temo que seoista se ha equivovado,

Hola caricatos, corrijo: Este fondo degradado esta hecho con STYLE (CREO QUE me lo pasó caricatos)
Es que guardo los códigos que me pasais, pero después no me acuerdo quién lo pasó (debería poner el nick de quién me lo pasa para no meter, de vez en cuando, la pata) y cómo tú me has ayudando tanto, ¡te lo he adjudicado!.

Un abrazo amigo caricatos

fobos · #7 (**permalink**) 07/06/2004, 13:39

wowww muchas gracias caricatos, seoista y barba, seguro que sus tips y códigos me van a servir.

fobos · #8 (**permalink**) 07/06/2004, 15:56

amm tengo una dude sobre tu código, caricatos... como puedo ponr el degradado de forma horizontal?

fobos · #9 (**permalink**) 07/06/2004, 16:13

ammm, tengo otra duda

... caricatos, mencionaste que mozilla implementa algunas cosillas equivalentes al degradado de micrisoft... pues la duda es eso, como es el código para degradar en mozilla

caricatos · #10 (**permalink**) 07/06/2004, 17:22

Cita:

Iniciado por fobos

wowww muchas gracias caricatos, seoista y barba, seguro que sus tips y códigos me van a servir.

Código:

<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 anchoCelda = ancho / 256; 
				var tabla = "<table cellpadding=0 cellspacing=0 width=100% height=100%><tr>"; 
				for (var i = 255; i >= 0; i --) 
					tabla += "<td height=100% width=" + anchoCelda + " style='background-color: #FF" + color(i) + "00' ></td>" 
				tabla += "</tr></table>"; 
				document.getElementById("fondo").innerHTML = tabla; 
			} 
		</script> 
	</head> 
	<body style="margin:0" onresize=ini() 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 border=1> 
					<tr> 
						<td > 
							Tabla sin importancia 
						</td>
					</tr>
				</table> 
			</div> 
		</div> 
	</body> 
</html>

Saludos

fobos · #11 (**permalink**) 07/06/2004, 18:47

gracias caricatos !