Gradientes

Hay algunas páginas donde se vé un efecto de gradiente o degradado entre 2 colores, y nos hacemos la idea de que es un efecto muy difícil de conseguir.

Los editores gráficos crean ese tipo de imágenes en muy poco tiempo, pero al tener las imágenes, si no llega a convencernos, nos suele dar un poco de pereza buscar otro par de colores para combinar... abrir otra vez nuestro editor, y cambiarle los colores de la transición.

Conseguir los colores online

Podemos obtener los colores desde esta página: Gradientes (php + librerías GD)... y con esto estaría el artículo terminado... ¡fiu! ¡fiu!...

Pero ¿por qué no ofrecemos elegir sus propios gradientes a nuestros visitante...?

Con un fichero php de unas cuantas líneas, y la declaración de un estilo podemos obtener una interesante variedad de gradientes...

Un poco de html (y css)

Bien, para que un fondo esté degradado tan solo es necesario usar una imagen degradada como fondo, puede ser el fondo de la página, de una capa, de un botón. El efecto puede ser vertical u horizontal, y la imagen puede ser solo de un pixel (de altura o anchura), y lo que deseemos de longitud.

Teniendo una imagen de un pixel de anchura y 100 píxeles de altura, con el degradado desde el azul al blanco, llamada (por ejemplo) "blancoAzul.jpg", podemos poner una franja con ese gradiente al tope de nuestra página muy fácilmente.

La declaración para ese efecto, sería así:

<style type="text/css" >
body	{
	background: url(blancoAzul.jpg) repeat-x top left;
}
</style >

Un poco de php (y GD)

Si disponemos del lenguaje php y las librerías GD (todo gratuito), podemos crear un fichero imagen y con unos parámetros fácilmente podemos conseguir el degradado que deseemos. Voy a presentar el código php del fichero "gradiantesV.php" que se encarga de generar los gradiantes verticales (mostrando el efecto en horizontal)

<?php
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($destino, 0, $i, $transito[$i]);
@imagepng($destino);
imagedestroy($destino);
?>

Recomiendo obtener el dibujo en un fichero gráfico, guardando en nuestro ordenador el resultado.

Se puede modificar el fichero que acabo de presentar con otro parámetro para dar nombre al resultado, y añadirle ese nombre a la función imagepng haciendo que se genere el el fichero gráfico.

Y un toque javascript

Si el fondo degradado queremos que se aplique a toda la página o todo un recuadro, no nos queda más remedio que tener el fichero php disponible (operativo), a no ser que usemos tamaños definidos en pixeles.

Con unos sencillos retoques del resultado que se muestra en la página que propuse al principio, podemos obtener unos resultados excelentes.

function gradiente(color1, color2)	{
	elemento = document.body;
	altura = elemento.clientHeight;
	var fondo = "URL(gradientesV.php?altura=";
	fondo += altura + "&color1=" + color1 + "&color2=" + color2 + ")";
	elemento.style.backgroundImage = fondo;
	elemento.style.backgroundPosition = "top";
	elemento.style.backgroundRepeat = "repeat-x";
}

¡Pruébalo en esta misma página!

Se puede ver el efecto en esta misma página, con los 3 colores primarios:


   




Comentarios

Nombre: Alex López
Procedencia: Mèxico
E-Mail: treeals@gmail.com
Fecha de envío: 23 de agosto de 2009, a las 06:40.
comentario:

excelente código, gracias por el aporte


Nombre: Deron Land Eleniak
Procedencia: Donde sea invocado, bueno si se me da la gana
E-Mail: Ryoga_melleva@hotmail.com
URL: http://es.geocities.com/kosanostracchvallejo/index.htm
Fecha de envío: 1 de agosto de 2007, a las 18:41.
comentario:

Oye disculpa, quiero poner una caja de sujerencias como esta pero no puedo encontrar el codigo en javascript, me podrias enseñar a hacer una, o te pido de favor si me podrias mandar el codigo de esta pagina y donde pongo os link para que el mensaje aparesca en mi propia pagina, pero sin el codigo de envio, ya intente ver como funciona, pero no puedo hacerla.

Te agradesco tu tiempo y tu comprención


Fecha de envío: 27 de julio de 2007, a las 23:24.
comentario:

Holas como estas me parec bien estos codigoa


Colabore enviando su comentario

Nombre
Procedencia
Página web
E-mail *
Evaluación evaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluar
Código de envío

Rellene este campo con la clave de la imagen: codigo de envío

Nota Importante

El campo E-Mail es obligatorio para activar por correo electrónico el comentario (si no desea que se haga público, marque la casilla "anonimato"). También es obligatorio el código "captcha" (el número que se ve en la imagen adjunta); y por supuesto, debe existir un comentario.

Puede encontrar información sobre este sistema de comentarios en este enlace: Ponga comentarios en su web.

Edición negrita cursiva subrayado   alineación izquierda alineación derecha alineación centrada alineación justificada   Insertar enlace insertar imagen   Emoticones: [:)] [:(] [:x] [BIEN] [MAL] [SI] [NO] [APLAUSOS] [MEJORABLE] [¡A VER!] [¡DÉJAME PENSAR!] [FLIPE] [¡SIN PALABRAS!]
Copyright © 2006-2018 www.caricatos.net
Visitas: 16266