gradientes

caricatos · #1 (**permalink**) 17/12/2004, 18:14

Hola:

Hace tiempo puse un mensaje sobre fondos degradados en las FAQs javascript y me han preguntado como elegir los colores, ya que el ejemplo venía con una transición difícil de confugurar, y no sabía responder...
En otro mensaje, otro buen forero (epplestun) mostró una página donde se podían encontrar los colores intermedios de 2 dados, y basándome en esa página, preparé el siguiente script:

Código:

function decahex(n) {
	return hexa.charAt(n / 16) + hexa.charAt(n % 16);
}

function colorHexa(c) {
	return "#" + decahex(c[0]) + decahex(c[1]) + decahex(c[2]);
}

function transitar(ini, fin, pasos) {
	var dato = desglose(ini);
	var rIni = dato[0];
	var gIni = dato[1];
	var bIni = dato[2];

	var intermedios = new Array(pasos);
	intermedios[0] = dato;

	var dato = desglose(fin);

	intermedios[pasos - 1] = dato;

	var rFin = dato[0];
	var gFin = dato[1];
	var bFin = dato[2];

	var rMed = (rFin - rIni) / (pasos - 1);
	var gMed = (gFin - gIni) / (pasos - 1);
	var bMed = (bFin - bIni) / (pasos - 1);

	for (var i = 1; i < pasos - 1; i ++)	{
		var rgb = new Array(3);
		rgb[0] = parseInt(rIni + (rMed * i));
		rgb[1] = parseInt(gIni + (gMed * i));
		rgb[2] = parseInt(bIni + (bMed * i));
		intermedios[i] = rgb;
	}
	for (i = 0; i < intermedios.length; i ++)
		intermedios[i] = colorHexa(intermedios[i]);

	return intermedios;
}

function desglose(color) {
	if (color.length != 6)
		return "poblema";
	else	{
		devolver = new Array(3);
		devolver[0] = hexadec(color.substr(0, 2));
		devolver[1] = hexadec(color.substr(2, 2));
		devolver[2] = hexadec(color.substr(4, 2));
	}
	return devolver;
}
var hexa = "0123456789abcdef";

function hexadec(x) {
	x = x.toLowerCase();
	return parseInt(hexa.indexOf(x.charAt(0))) * 16 + parseInt(hexa.indexOf(x.charAt(1)))
}

Usando: var colores = transitar(color1, color2, longitud);

Se obtiene en la variable colores, un array con todos los colores intermedios entre color1 y color2 (creo que no es necesario explicar el significado de longitud)

Se puede ver un ejemplo en este enlace: http://www.pepemolina.com/mapas/difuminado.html

Saludos

Carlitos · #2 (**permalink**) 18/12/2004, 03:32

interesante.

gracias.

un saludete.

caricatos · #3 (**permalink**) 18/12/2004, 04:19

Cita:

Iniciado por Carlitos

interesante.

gracias.

un saludete.

Hola Carlitos:

Me alegro de que te "interese"... Voy a ver si retoco el mensaje de las FAQs sobre fondos degradados.

<offtopic>Acabo de visitar tu página, y vi el nuevo look, ¡enhorabuena! Aunque el desplegable se pliega muy pronto...

.
También he visto un mensaje donde enlazabas a una página con una galería con la ampliación en el centro, y creo que es digno de que esté en tu página.</offtopic>

Un saludete

caricatos · #4 (**permalink**) 03/12/2005, 15:20

Hola:

Después de un tiempo sin tocar la página que proporciona la imagen en degradado, la he vuelto a retocar: http://www.caricatos.net/gradientes/

Saludos

xemccoh · #5 (**permalink**) 04/05/2008, 13:15

Oye caricatos soy nuevo en esto de php, y nesecito un fondo para una pag web con degradado, ya he mirado el sitio en donde se puede escoger los colores y al "pinchar" actualizar te sale los colores q escogiste (Muy bueno), despues de esto te muestra un fragmento de codigo con la funcion: function inicio(){}, y te sale para descargar los gradientes, yo copio tal cual la funcio y descomprimo el zip y lo dejo en la misma carpeta en donde tengo la pagina principal.html (llamando a la funcion en el body <body onload="inicio()" >) sin embargo no me muestra el fondo degradado, mi pregunta es eso funciona solo localhost o q estoy haciendo mal???

aqui va el codigo:

<html>
<head>
<title>degradado</title>
<script type="text/javascript" charset="ISO-8859-1">
function inicio() {
elemento = document.getElementById("principal");
color1 = "FFFFFF";
color2 = "1E90FF";
altura = elemento.clientHeight;
anchura = elemento.clientWidth;
var fondo = "URL(gradientes" + gradiente + ".php?";
if (!gradiente) gradiente = "H";
fondo += (gradiente == "V") ? "altura=" : "anchura=";
fondo += (gradiente == "V") ? altura : anchura;
fondo += "&color1=" + color1 + "&color2=" + color2 + ")";
elemento.style.backgroundImage = fondo;
}
</script>
</head>
<body onload="inicio()" >
<div id="principal" >
<h1>hola</h1>
</div>
</body>
</html>

ayudame por favor!!!!!

caricatos · #6 (**permalink**) 04/05/2008, 16:31

Hola:

Si los ficheros están bien descomprimidos, tal vez el servidor no soporte php o las librerías GD... averígualo y si las url's son correctas, deberías indicarnos un sitio donde chequear la página.

Saludos