que funciones estoy buscando?

kafok · #1 (**permalink**) 28/09/2011, 15:52

Hola, me gustaria asignar a un div un fondo con degradado de css3 mediante javascript, pero no se como hacerlo y no se como hacerlo compatible para la mayoria de ordenadores.

Panino5001 · #2 (**permalink**) 28/09/2011, 16:53

Fijate si te sirve esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#pp,#ppp{ width:500px; height:30px;}
</style>
<script type="text/javascript">

function gradiente(idObj,col1,col2,tipo){ 
    if (document.createElement("canvas").getContext) { 
            /* ---- canvas ---- */ 
            var b1=parseInt(col1.substr(5,2),16); 
            var g1=parseInt(col1.substr(3,2),16); 
            var r1=parseInt(col1.substr(1,2),16); 
            var b2=parseInt(col2.substr(5,2),16); 
            var g2=parseInt(col2.substr(3,2),16); 
            var r2=parseInt(col2.substr(1,2),16); 
            var ref = document.createElement("canvas"); 
            ref.width = document.getElementById(idObj).offsetWidth; 
            ref.height =document.getElementById(idObj).offsetHeight;  
            var context = ref.getContext("2d"); 
            context.translate(0,0); 
            context.scale(1,1); 
            if(tipo){ 
                context.translate(ref.width,0); 
                context.rotate(Math.PI/2); 
                var gradient = context.createLinearGradient(0, 0, 0, ref.width);
                gradient.addColorStop(1, "rgba("+r1+","+g1+","+ b1+", 1.0)"); 
                gradient.addColorStop(0, "rgba("+r2+","+g2+","+ b2+", 1.0)"); 
                context.fillStyle = gradient; 
                context.fillRect(0,0,ref.height, ref.width); 
            }else{ 
                var gradient = context.createLinearGradient(0, 0, 0, ref.height);
                gradient.addColorStop(0, "rgba("+r1+","+g1+","+ b1+", 1.0)"); 
                gradient.addColorStop(1, "rgba("+r2+","+g2+","+ b2+", 1.0)"); 
                   context.fillStyle = gradient; 
                context.fillRect(0,0,ref.width, ref.height); 
            } 
            document.getElementById(idObj).style.background='url('+ref.toDataURL()+')';
    } else { 
    /* ---- DXImageTransform ---- */  
                document.getElementById(idObj).style.filter= 
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+col1+", endColorstr="+col2+", GradientType="+tipo+")"
    } 
} 
window.onload=function(){ 
gradiente('pp','#FF0000','#FFFF00',0); 
gradiente('ppp','#FFFFFF','#000000',1); 

} 
</script>
</head>

<body>
<div id="pp">ejemplo</div>
<div id="ppp">ejemplo</div>

</body>
</html>