Hola
Egomanus :
Me da un poco de vergüenza que me levantes el pulgar a mí, justo en un tema donde han participado algunos de los próceres del foro de javascript con ejemplos que son brillantes. Pero igual se agradece.
Estos códigos son un poco viejos, y el de mi enlace debe ser de la época en que no había
gradient, por eso usábamos el truco de adaptar
alpha.
Con el tiempo fuimos agregando más temas, con má###étodos y versiones de los ya posteados; pero parece que el que nos falta es el de
canvas, así que aprovecho y lo pongo aquí
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<canvas id=degrad></canvas>
<head>
<title>DEGRADADO CON CANVAS / GRADIENT.</title>
<script type="text/javascript">
function gradiente(){
var prueba = document.getElementById('degrad');
if (prueba.getContext){
var canv = prueba.getContext('2d');
var grad = canv.createLinearGradient(0,0,0,200);
grad.addColorStop(0,'#ff0000');
grad.addColorStop(1,'#ffff00');
canv.fillStyle = grad;
canv.fillRect(0,0,1000,1000);
alert("Con canvas.");
}
else alert("Con gradient.");
}
onload = gradiente;
</script>
<style type="text/css">
body, html {height:100%; width:100%; overflow:hidden; margin:0; }
body { overflow:auto;
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#ff0000, endColorstr=#ffff00); }
canvas { height:100%; width:100%; position:absolute; top:0;
left:0; z-index:-1; }
#contenedor { margin:15px 10px; }
center { font-size:200%; }
</style>
</head>
<body>
<div id=contenedor>
<h2>Fondo gradiente con <tt>canvas</tt> (FF, Op, Saf?, Chr) y <tt>gradient</tt> (IE).</h2>
<center>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|
<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|
<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br>|<br> — </center>
</div>
</body>
</html> Tiene un problema en
Chrome (beta), pero no con el degradado sino con la barra de desplazamiento. (Nuevo
browser, nuevo dolor de cabeza.)
Lo que me gustaría rescatar para el final, es la acertada redacción de tu mensaje. Es costumbre que si alguien resucita un tema viejo, después lo cierren, pero he notado que ocurre sólo cuando el mensaje es harto desubicado. Si está escrito correctamente y con las salvedades del caso (p.e. que es para "
una aplicacion de intranet donde todas las pc usan IE ") el post se mantiene, porque todavía puede ser útil (¡y a éste ya lo levantaron 2 veces!
).
Me parece que puede ser un buen ejemplo —especialmente para los novatos— sobre cómo postear de manera útil, y sobre todo respetuosa, en temas que ya tienen sus años.
Y así evitamos que se pierda o se desparrame la información.
Saludos
furoya.
P.D.: En
Safari también se puede usar
-webkit-gradient(), pero no lo probé. En
Chrome sí, y no anda.
Background degradado