Autor Tema: degradado JS (Leído 13214 veces)

darkela · « : marzo 06, 2007, 02:21:26 pm »

Encontre este codigo de java script por que andaba buscando como hacer una pagina con un degradado de fondo sin usar una imagenes... entontre esto, pueda que le ayude a varios... o me den otras ideas mas sencillas... pero lo que sucede es que no le puedo cambiar los colores no entiendo como los usan...

Citar

<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% height=100%>";
for (var i = 255; i >= 0; i --)
tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: #00" + color(i) + "EA' ></td></tr>"
tabla += "</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;">
<div>
</div>
</body>
</html>

segun travesee y lo lei pues... le pude cmabiar colores en esta linea pero... nomas a colores solidos... yo quiero color de una grisito a azulado pero.. no se como >.<[/b]

Citar

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

sicario · « **Respuesta #1 :** marzo 06, 2007, 02:29:47 pm »

humildemente porque no se conque se come esto.. pude ver que si cambias el valor en esta linea

Citar

style='background-color: #00"

en vez del #00 pones 10 y alli va cambiando pero como es un vector creo que eso solo cambia la parte de abajo... suerte DARKELIS....

darkela · « **Respuesta #2 :** marzo 06, 2007, 02:44:34 pm »

si ahi le trato de cambiar colores pero.. pues... es por demas.. yo tengo mis colores en hex... para el degradado arriba el #d8d9dc y abajo #79a2c2, pero no se como los ponen ....

auxilio

rdoggsv · « **Respuesta #3 :** marzo 06, 2007, 02:49:08 pm »

Vos ya decidistes que queres que llegue desde #d8d9dc hasta #79a2c2 ?? , eso es lo que te he entendido.

Código: [Seleccionar]

function color(n)    {
    return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
}

Esta funcion devuelve 2 letas, segun el valor de n que le mandes a la funcion, han puesto 0123456789ABCDEF.charat(parseInt(n/16)) y a eso le suman lo mismo pero sumado de caracteres mejor dicho lo concatenan.

Y eso lo hacen desde 255 hasta 0

Código: [Seleccionar]

for (var i = 255; i >= 0; i --)

Avisame si lo que que queres que haga es lo que dice en la primera linea y te ayudo hacerlo.

darkela · « **Respuesta #4 :** marzo 06, 2007, 02:52:26 pm »

si esos colores quiero que salgan... tan deciditos.. jakajkajka

si entiendo lo que me explicas y agarro la idea... lo que no se es como pones esos valores O.o

gracias rdog!

rdoggsv · « **Respuesta #5 :** marzo 06, 2007, 02:55:45 pm »

ok le voy a comenzar a idear a ve que sale porque fijate que va haber que cambiar cosas de el script debido a que ese script funciona solo para cuando los 2 hexa de enmedio son los que se modifican.

Por ejemplo para esa pagina que ahi se crea el primero es #00FFEA y el ultimo es #0000EA , entonces solo recorre desde FF hasta 00 por eso les sale bien facil

darkela · « **Respuesta #6 :** marzo 06, 2007, 03:06:02 pm »

ahhhh ahora caigo jakajkajka

ah esta bn vos... cambiale lo que creas necesario nomas que quiero que haga el degradado para la web

muchas gracias

rdoggsv · « **Respuesta #7 :** marzo 06, 2007, 09:41:34 pm »

Mira fijate que ya estuve dandole y no le encontre manera

, creo que la falta de conocimientos en javascript me estan haciendo clavo jajaja , y tambien fijate que me di cuenta de algo.

Que lo que hace es que crea una tabla ficticia en todo el div conocido como fondo , y la verdad no te recomendaria eso pues como que no es muy estandarizado para darle el fondo crear una tabla atraves del documento solo para darle color :S

Igual voy a tratar de averiguar con alguien que pueda javascript si no hay alguna otra manera :P y te aviso si descubro algo.

Por cierto encontre esto

http://4umi.com/web/javascript/gradient.htm

Que hace exactamente eso de ir de un color a otro color y si le pones que en 255 pasos justo te podria servir para la tabla que crea el ejemplo que vos pusistes , pero la verdad no le encontre como se utiliza :P

darkela · « **Respuesta #8 :** marzo 07, 2007, 09:51:44 am »

jakajkajka vea que esta bn complicado...

es que yo tampoco entiendo como hacene sos cambios bruscos de los colores... no se.. vua seguir tambein quebrandome la cabeza...

pero.. pues una forma mas facil de ponerle un degradado a un web? sin usar una imagen.. porq eu ya intente con una imagen pero pues... queria ahcerlo de otra manera... sabes vos como? asi como aqui

mil gracias rdog!

rdoggsv · « **Respuesta #9 :** marzo 07, 2007, 09:56:19 am »

No pero el de ese link que pusistes es facil, solo creas una imagen que haga el degradado hasta un color y despues le pones ese color como fondo

sortux · « **Respuesta #10 :** marzo 07, 2007, 10:51:10 am »

Cita de: darkela en marzo 07, 2007, 09:51:44 am

pero.. pues una forma mas facil de ponerle un degradado a un web? sin usar una imagen.. porq eu ya intente con una imagen pero pues... queria ahcerlo de otra manera... sabes vos como? asi como aqui

mil gracias rdog!

ahi utilizan una imagen!

esta ve:

sortux · « **Respuesta #11 :** marzo 07, 2007, 11:13:06 am »

bueno me puse a buscar y encontre algo, solo es de ke lo pruebes. Aki va:

este es el codigo javascript ke encontre para eso

Código: [Seleccionar]

/*************************

Cross Browser Gradient Backgrounds
v1.0
Last Revision: 11.03.2005
steve@slayeroffice.com

please leave this notice in tact.

should you improve upon this code, please
let me know so that I may update the version
hosted on slayeroffice

--- to use --
reference this file (on your own server) as a javascript src
in the head of your document. give the elements
you want a gradient background applied to a class as such:

class="gradient 000000 ffffff horizontal"

See http://slayeroffice.com/code/gradient/ for more examples.


*************************/

window.addEventListener?window.addEventListener("load",createGradient,false):window.attachEvent("onload",createGradient);

function createGradient() {
	if(!document.getElementById)return;

	objArray = getGradientObjects();
	if(!objArray.length) return;

	for(i=0;i<objArray.length;i++) {
		params = objArray[i].className.split(" ");
		if(document.all && !window.opera) {
			objArray[i].style.width = objArray[i].offsetWidth + "px";
			params[3] == "horizontal"?gType = 1:gType = 0;
			objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"#" + params[1] + "\",EndColorStr=\"#" + params[2] + "\")";
	} else {
			colorArray = createColorPath(params[1],params[2]);
			x=0;y=0;
			if(params[3] == "horizontal") {
				w=Math.round(objArray[i].offsetWidth/colorArray.length);
				if(!w)w=1;
				h = objArray[i].offsetHeight;
			} else {
				h = Math.round(objArray[i].offsetHeight/colorArray.length);
				if(!h) h =1;
				w = objArray[i].offsetWidth;
			}
			makeGrandParent(objArray[i]);
			tmpDOM = document.createDocumentFragment();
			for(p=0;p<colorArray.length;p++) {
				g = document.createElement("div");
				g.setAttribute("style","position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + colorArray[p][0] + "," + colorArray[p][1] + "," + colorArray[p][2] + ");");
				params[3] == "horizontal"?x+=w:y+=h;
				tmpDOM.appendChild(g);
				if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
			}
			objArray[i].appendChild(tmpDOM);
			tmpDOM = null;
		}
	}
}

function getGradientObjects() {
	a = document.getElementsByTagName("*");
	objs = new Array();
	for(i=0;i<a.length;i++) {
		c = a[i].className;
		if(c != "") if(c.indexOf("gradient") == 0) objs[objs.length] = a[i];
	}
	return objs;
}

function createColorPath(color1,color2) {
	colorPath = new Array();
	colorPercent = 1.0;
	do {
		colorPath[colorPath.length]=setColorHue(longHexToDec(color1),colorPercent,longHexToDec(color2));
		colorPercent-=.01;
	} while(colorPercent>0);
	return colorPath;
}

function setColorHue(originColor,opacityPercent,maskRGB) {
	returnColor=new Array();
	for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
	return returnColor;
}

function longHexToDec(longHex) {
	return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));
}

function toDec(hex) {
	return parseInt(hex,16);
}

function makeGrandParent(obj) {
	disp = document.defaultView.getComputedStyle(obj,'').display;
	disp == "block"?nSpan = document.createElement("div"):	nSpan = document.createElement("span");
	mHTML = obj.innerHTML;
	obj.innerHTML = "";
	nSpan.innerHTML = mHTML;
	nSpan.setAttribute("style","position:relative;z-index:10;");
	obj.appendChild(nSpan);
}
</script>

y pues para aplicarlo es con la etiqueta class asi:

Código: [Seleccionar]

class="gradient d8d9dc 79a2c2 vertical"puse esos colores porke son lo que necesitas para hacer el gradient, aunke se pueden cambiar al gusto!

eso es todo, la etiqueta class la puedes usar en el <body> o bien <div> o <p>, etc!! espero te funcione

*******************EDITADO********************

se me olvidaba la fuente

Código: [Seleccionar]

http://slayeroffice.com/code/gradient/
aki otros ejemplos

Código: [Seleccionar]

http://www.designdetector.com/demos/css-gradients-demo-1.php

darkela · « **Respuesta #12 :** marzo 07, 2007, 04:38:52 pm »

cabal eso que me dijo rdog habia hecho... pero no queria usar una imagen... >.< jakjakajakjak

pero cuando llegue a mi casita voy a probar con esa info ue me paso sortux.. muchas gracias... y la voy a ller bn...
eso del gradiente en colores lo siento mero wakalas

sortux · « **Respuesta #13 :** marzo 09, 2007, 11:16:38 am »

bueno y probaste el ejemplo anterior???

kerberoz · « **Respuesta #14 :** marzo 09, 2007, 09:20:57 pm »

Yo también me puse a "trevesiar" con esa onda del degradado sin usar imagenes y encontre algo ke te puede servir de mucho, pero solo sirve usando css y en teoria deberia funcionar en FireFox y en Internet Explorer pero no se por ke no furula en FireFox

Este es el ejemplo ke le pone un degradado al fondo de una pagina web

Código: [Seleccionar]

<html>
  <head>

    <style type="text/css">

      body {margin:0; background:#000}

      #body {background:#222;width:100%; height:100%; filter:Alpha(Opacity=100,
      FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100%)}

    </style>

  </head>
<body>

<div id="body"></div>

</body>

</html>

Revisa este sitio para ke veas con mas detalle ke debes hacer.

Código: [Seleccionar]

http://www.dotnetcr.com/Libreria.aspx?art=74&tag=Degradado-con-CSS-Filter

Sv Community El Salvador

Noticias:

Autor Tema: degradado JS (Leído 13214 veces)

darkela

degradado JS

sicario

Re: degradado JS

darkela

Re: degradado JS

rdoggsv

Re: degradado JS

darkela

Re: degradado JS

rdoggsv

Re: degradado JS

darkela

Re: degradado JS

rdoggsv

Re: degradado JS

darkela

Re: degradado JS

rdoggsv

Re: degradado JS

sortux

Re: degradado JS

sortux

Re: degradado JS

darkela

Re: degradado JS

sortux

Re: degradado JS

kerberoz

Re: degradado JS