logo El diario de Pepe Molina (Caricatos)

yo

Conseguir fondos en colores degradados (o gradientes) cada vez es más fácil.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Demostrar gratitud con moderación es un signo de mediocridad

Roberto Benigni, actor; cómico y director italiano (1952-).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Gradientes... y svg

emoticón de Caricatos Publicado el día 04 de agosto de 2013
id=123; categorías: Vicisitudes de un Webmaster, Programación

Conseguir fondos en colores degradados (o gradientes) cada vez es más fácil. Hace algunos años hemos dedicado algunas páginas y artículos al respecto que comentaremos a continuación.

Un poco de historia

En las viejas "FAQs Javascript" de los "Foros del Web" (véase "Mis recomendaciones", a la izquierda de esta página) habíamos compartido un mensaje sobre "Fondo degradado" en páginas web, donde abusando de tablas creábamos ese efecto.

Un evidente signo de progreso ha sido la implementación de una aplicación que generaba imágenes para poder ser descargadas de la web: Gradientes (php + librerías GD), donde los gradientes eran imágenes de 1 pixel de altura o anchura (según el caso que fuera) y la otra dimensión era la longitud que necesitásemos.

Los resultados se conseguían de una forma muy sencilla, simplemente separando los componentes y calcular el incremento por cada uno de ellos (incluso negativos. El siguiente es el código javascript insertado en otra de las FAQs del foro:

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)))
}

Podemos ver en funcionamiento el código, desde el siguiente enlace: Efecto fundido en texto, que aunque trate de otro asunto, genera los colores necesarios para un gradiente entre dos colores y un número de pasos estipulado.

Nuevas opciones

En la actualidad disponemos de otras opciones que deberían generar los mismos resultados. Nosotros plantearemos fondos aplicando estilos y las imágenes SVG.

gradiente del rojo al azul con 200 pixeles

De los tres gradientes que hemos expuesto, el primero es una imagen generada con un código similar al que expusimos al principio de este apunte. El segundo de los casos es simplemente una capa con estilos; que es precisamente lo que nos interesa, pero a día de hoy no es estándar, aunque es de esperar que pronto lo sea.

El último de los casos se trata de una imagen svg cuyo código es:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
x="0" y="0" width="200" height="10" preserveAspectRatio="none" viewBox="0 0 200 10" id="gradientes_svg">
	<defs>
		<linearGradient id="rojo_azul_svg" x1="0%" y1="0%" x2="100%" y2="0%" >
			<stop offset="0%" stop-color="red"/>
			<stop offset="100%" stop-color="blue"/>
		</linearGradient>
	</defs>
	<rect fill="url(#rojo_azul_svg)" width="100%" height="100%" />
</svg>

Nos falta usar canvas, para no depender del uso de javascript.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.123) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 4631 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/FONDO010.gif
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
http://www.pepemolina.com/postales/Navidad/snow_anm.gif
http://www.pepemolina.com/postales/Navidad/xmastree2.gif
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio