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: