Foros del Web » Creando para Internet » Diseño web »

Transitar color de fondo - Gradientes (de Caricatos)

Estas en el tema de Transitar color de fondo - Gradientes (de Caricatos) en el foro de Diseño web en Foros del Web. Hola, estoy intentando usar el " transitador de Caricatos " solo me sale una duda... -para q el difuminado del color siempre ocupara toda la ...
  #1 (permalink)  
Antiguo 30/01/2007, 05:36
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Transitar color de fondo - Gradientes (de Caricatos)

Hola,
estoy intentando usar el "transitador de Caricatos"

solo me sale una duda...
-para q el difuminado del color siempre ocupara toda la pantalla? es decir, aunque no este llena del todo q solo haya un titulo, q esta tambien se viera toda difuminada, como seria?

gracias de antemano!

saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #2 (permalink)  
Antiguo 31/01/2007, 01:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Transitar color de fondo - Gradientes (de Caricatos)

Hola:

Gracias por usar el sistema.

Si he entendido la pregunta, la respuesta es que dependes de javascript para que puedas llenar toda la página con un degradado... y en vez de poner una imagen jpg de fondo del body tendría que ser un script (en este caso php) con parámetros:

document.body,style.backgroundImage = "url(.../grafiantesV.php?color1=000000&color2=FFFFFF&altura =" + document.body.offsetHeight;

En la página que genera la imagen de fondo: Gradientes (php + librerías GD) al "finalizar" se muestra el código para incrustar en la página, y también hay un enlace para bajar los ficheros php, para poderlos usar en tu propio servidor.

Las páginas que no usan javascript suelen poner el mismo color de fondo del body (o elemento al que se aplica el degradado) igual al segundo color del degradado.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 31/01/2007, 01:47
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Re: Transitar color de fondo - Gradientes (de Caricatos)

buenos dias...
mirare lo q me has dicho a ver si soy capaz de sacarlo! sino ya te comentaria la duda mas concretamente....

Cita:
Iniciado por caricatos Ver Mensaje
Hola:
Gracias por usar el sistema.
gracias a ti por crearlo!

saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #4 (permalink)  
Antiguo 31/01/2007, 02:00
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Re: Transitar color de fondo - Gradientes (de Caricatos)

hola de nuevo...
hay una cosa q no entiendo.. me he estado mirando el link q me has puesto, pero la funcion inicio va sobre una capa (div principal) entonces este div tiene q tener unas proporciones para q ocupe la pagina, lo q intento hacer es q el fondo de pantalla siempre sea difuminado, indeferentemente del tamaño de la pantalla, de la cantidad de datos q pueda mostrar... no ser como si fuera un color de fondo del body... quizas este expicado pero no acabo de verlo... a ver si me puedes orientar un poquito mas...

gracias de antemano,

saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #5 (permalink)  
Antiguo 31/01/2007, 02:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Transitar color de fondo - Gradientes (de Caricatos)

Hola:

Es que para saber el tamaño del body dependes de javascript (document.body.offsetWidth/offsetHeight)... y el body tiene que estar cargado (<body onload=""...>) a no ser que lo acotes con estilos, pero en este caso tendrías que estudiar bien los estilos que vas a poner (width/height/overflow/background-attachment...) y si se excede de cierto tamaño deberías tener un scroll que no creo adecuado.

En el artículo puedes ver el código que se genera al pinchar en los botones que hay a pie de página (con degradados):

Código:
<script type="text/javascript">
function gradiente(color1, color2)	{
	elemento = document.body;
	altura = elemento.offsetHeight;
	var fondo = "URL(../scripts/gradientesV.php?altura=";
	fondo += altura + "&color1=" + color1 + "&color2=" + color2 + ")";
	elemento.style.backgroundImage = fondo;
	elemento.style.backgroundPosition = "top";
	elemento.style.backgroundRepeat = "repeat-x";

}
</script>
Un apunte que no he considerado es que habría que llamar a este script también en el redimensionado:
(<body onresize ...>)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 31/01/2007, 06:39
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Re: Transitar color de fondo - Gradientes (de Caricatos)

hola de nuevo,
tengo una duda, a ver, trabajo con php + ajax, y tengo un menu horizontal en la parte superior de la pagina principal, al clickar encima de una opcion de menu el div q hay debajo se actualiza con la inf de la pagina, bueno pues lo q me pasa es con ie, si voy acceciendo en las diferentes paginas, lo q es el difuminar se va prolongando segun el tamaño de la pagina, en firefox no, es decir, solo se ve el difuminar en el tamaño original de a pagina principal...
no ser si me explicado bien. a ver si me podeix echar un cable...

PD: no he conseguido cambiar todo el fondo de pantalla!
con esto ya tendria q cojer el tamaño de la pagina no?
Código:
elemento = document.body;
altura = elemento.clientHeight;
o el body solo ocupa la pequeña tabla q tengo puesta...
si es asi, aun no ser como puedo llenar el fondo de pantalla...
me da = usar javascript, php o lo q sea...

EDITADO: codigo principal de mi pagina default.php
Código HTML:
<?
require("../aut_verifica.inc.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script language="javascript" src="js/funcions.js"></script>
<script language="javascript" src="js/calendari.js"></script>
<script language="javascript" src="js/isiajax.js"></script>
<script language="javascript" src="js/isixml.js"></script>
</head>
<body onLoad="myajax = new isiAJAX('main', 'cargador'); gradiente('0000FF', 'FFFFFF');" onResize="gradiente('0000FF', 'FFFFFF')">
<!--Imatge q es veu quan carrega una pagina o consulta-->
<div id="cargador">
	<img src="img/loading.gif" alt="load" width="16" height="16"> &nbsp; 
	<a href= "javascript:myajax.Cancel();">
	<img border="0" src="img/cancelar.gif" alt="cancel" width="97" height="16"></a>
</div>
<div id="principal">
<table width="100%">
<tr>
<td>
<!--Menu Principal --> 
<div class="chromestyle" id="chromemenu">
	<ul>
		<li><a href="/maquines/default.php">Home</a></li>
		<li><a href="#" rel="dropmenu1">Maquinas</a></li>
		<li><a href="#" rel="dropmenu2">Averias</a></li>
		<li><a href="#" rel="dropmenu3">Actividades</a></li>
		<li><a href="#" rel="dropmenu4">Rapport</a></li>
		<li><a href="#" rel="dropmenu5">Configuracion</a></li>
	</ul>
</div>
<!--1er Menu desplegable --> 
<div id="dropmenu1" class="dropmenudiv">
	<a href="#">Nueva</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>	
</div>
<!--2on Menu desplegable --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
	<a href="#">Nueva</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>
</div>
<!--3er Menu desplegable --> 
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
	<a href="#">Nueva</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>
</div>
<!--4art Menu desplegable --> 
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
	<a href="#rapport/default.php" onClick="myajax.Link(this.href, 'main')">Nuevo</a>
	<a href="#">Consulta1</a>
	<a href="#">Consulta2</a>	
	<a href="#">Consulta3</a>
</div>
<!--5e Menu desplegable --> 
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
	<a href="#">Empresa</a>
	<a href="#">Secciones</a>
	<a href="#">Tipo Maquina</a>
	<a href="#">Fabricante</a>
	<a href="#">Marca</a>
	<a href="#">Modelo</a>
	<a href="#">Usuarios</a>
</div>
<script type="text/javascript">
	cssdropdown.startchrome("chromemenu")
</script>
</td>
</tr>
<tr>
<td><div id="main"><img src="" border="0"></div></td>
</tr>
</table>
</div>
</body>
</html> 
y luego tengo un archivo para la funciones de php y otro con las de javascript.
Js:
Código PHP:
function gradiente(color1color2)    {
    
elemento document.body;
    
altura elemento.clientHeight;
    var 
fondo "URL(funcions/funcions.php?altura=";
    
fondo += altura "&color1=" color1 "&color2=" color2 ")";
    
elemento.style.backgroundImage fondo;
    
elemento.style.backgroundPosition "top";
    
elemento.style.backgroundRepeat "repeat-x";

PHP:
Código PHP:
//DIFUMINAR PAGINA
header("Content-Type: image/png");

function 
elColor($color)    {
    
$red 256 256;
    
$green 256;
    
$blue 1;
    return (
$red $color[0]) + ($green $color[1]) + ($blue $color[2]);
}

function 
losColores($arrayColores)    {
    
$devolver = array();
    for (
$i 0$i count($arrayColores); $i ++)
        
$devolver[$i] = elColor($arrayColores[$i]);
    return 
$devolver;
}

function 
desglose($fondo)    {
    return array(
hexdec($fondo[1]),hexdec($fondo[2]),hexdec($fondo[3]));
}

function 
rgbColor($fondo)    {
    
$red 100;
    
$green 100;
    
$blue 100;
    if( 
eregi"([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})"$fondo$retornar ) )
        return 
$retornar;
    else
        return array(
$fondo$red$green$blue);
}

function 
transitar($color1$color2$pasos) {
    
$devolver = array();
    
$pasos--;
    
$devolver[0] = desglose(rgbColor($color1));
    
$devolver[$pasos] = desglose(rgbColor($color2));
    
$rIni $devolver[0][0];
    
$gIni $devolver[0][1];
    
$bIni $devolver[0][2];

    
$rFin $devolver[$pasos][0];
    
$gFin $devolver[$pasos][1];
    
$bFin $devolver[$pasos][2];

    
$rMed = ($rFin $rIni) / $pasos;
    
$gMed = ($gFin $gIni) / $pasos;
    
$bMed = ($bFin $bIni) / $pasos;

    for (
$i 1$i $pasos$i ++)    {
        
$devolver[$i] = array($rIni round($rMed $i), $gIni round($gMed $i), $bIni round($bMed $i));
    }
    return 
losColores($devolver);
}

if (isset(
$_GET["altura"])) $altura $_GET["altura"];
else 
$altura 2;
$anchura 1;
if (isset(
$_GET["color1"])) $color1 $_GET["color1"];
else 
$color1 "000123";
if (isset(
$_GET["color2"])) $color2 $_GET["color2"];
else 
$color2 "ffabcd";

$fondo1 desglose(rgbColor($color1));
$fondo2 desglose(rgbColor($color2));
$transito transitar($color1$color2$altura);

//$destino = imagecreate($anchura, $altura);
$destino imageCreateTrueColor($anchura$altura);
for (
$i 0$i count($transito); $i ++)
    
imagesetpixel($destino0$i$transito[$i]);
@
imagepng($destino);
imagedestroy($destino); 
saludos y gracias de antemano
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier

Última edición por sergi_climent; 31/01/2007 a las 06:59
  #7 (permalink)  
Antiguo 31/01/2007, 11:37
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Re: Transitar color de fondo - Gradientes (de Caricatos)

ok... ya lo he conseguido... al final he optado por un div con un tamaño X y ya esta!

gracias por vuestra ayuda!

saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #8 (permalink)  
Antiguo 31/01/2007, 12:21
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Transitar color de fondo - Gradientes (de Caricatos)

Hola:

Lo que pasa es que el degradado es una imagen de un tamaño determinado, y si ese tamaño cambia, hay que cambiar el fondo con la misma imagen pero distintos parámetros... basicamente se cambia el tamaño cuando se terminan de cargar las imágenes, pero si originalmente se asignan los estilos o atributos width, height o se espera a que estén todas las imágenes cargadas (con una precarga)... y otro motivo es el resize de la página y se detecta con body onresize... pero además habría que contemplar las actualizaciones con ajax o cualquier modificacion del tamaño de forma dinámica... la verdad es que son tantas cosas, que una buena idea sería poner el fondo del body del mismo color del final del degradado.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 01/02/2007, 10:53
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Re: Transitar color de fondo - Gradientes (de Caricatos)

Cita:
Iniciado por caricatos Ver Mensaje
Hola:
una buena idea sería poner el fondo del body del mismo color del final del degradado.
Saludos
jajajajaja

es lo q he hecho! y la verdad q como el degradado empieza de clarito a oscuro... pues acaba todo del mismo color y fuera problemas! la parte principal q es la q me importaba ya tiene su degrada bonito de X px luego pues ya si se alarga la cosa pues del mismo color!

saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:45.