Foros del Web - Ver Mensaje Individual - Degradados(gradientes) para IE y navegadores viejos

alrvivas · #1 (**permalink**) 20/02/2012, 00:05

Como comentaba en mi post anterior con el mismo nombre [URL="http://www.forosdelweb.com/f53/degradados-gradientes-para-ie-navegadores-viejos-976391/"]"Degradados(gradientes) para IE y navegadores viejos"[/URL] en el foro de CSS, la idea es dar "soporte" para todos los navegadores, para lo cual les traigo este otro complemento, por si a alguien le agrada mas trabajar con JavaScript y por si tuvo algún contratiempo de la primera forma.

Lo que necesitamos hacer es crear una pequeña librería para hacer que nuestros navegadores tanto modernos como "antiguos" soporten los degradados.

Esta pequeña librería la descargue hace tiempo que ya no encuentro de donde así que la pondré tal cual.

js/gradientes.js

Código:

function $(x){return document.getElementById(x);} 
function css(id,prop){ 
    if(window.getComputedStyle){ 
        return document.defaultView.getComputedStyle($(id),null).getPropertyValue(prop);
    }else{ 
        var re = /(-([a-z]){1})/g; 
        if (prop == 'float') prop = 'styleFloat'; 
        if (re.test(prop)) { 
            prop = prop.replace(re, function () { 
                return arguments[2].toUpperCase(); 
            }); 
        } 
        return $(id).currentStyle[prop] ? $(id).currentStyle[prop] : null; 
    } 
} 
function gradiente(id,col1,col2,type){ 
    if (document.createElement("canvas").getContext) {          
            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 = parseInt(css(id,'width')); 
            ref.height =parseInt(css(id,'height')) 
            var context = ref.getContext("2d"); 
            context.translate(0,0); 
            context.scale(1,1); 
            if(type){ 
                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); 
            } 
            $(id).appendChild(ref); 
    } else {  
                $(id).style.filter= 
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+col1+", endColorstr="+col2+", GradientType="+type+")"
    } 
}

Ahora tenemos dos opciones utilizar modernizr.js o simplemente hacer referencia directamente en nuestro documento HTML.

Para ambos creamos nuestras hojas de estilos y mandamos llamar la función gradient.

Código:

<script>
       window.onload=function(){ 
              gradient('degradado','#2b1300','#a37b50',0); 
       } 
</script>

css/style.css

Código:

#degradado{
      width:100px;
      height:20px; border:1px solid #CCC;
}

Ahora simple mente mandamos llamar a nuestro id en una etiqueta div

Código:

<div id="degradado">Gradientes para todos</div>

y nos quedaría un archivo así:

gradientes.html

Código:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Degradados para todos</title>
<link rel="stylesheet"  href="css/style.css" media="screen" ></link>
<script src="js/degradados.js"></script>
<script> 

window.onload=function(){ 
gradient('degradados','#a37b50','#2b1300',0); 

} 
</script>   
</head> 

<body> 
<div id="degradados"></div> 

</body> 
</html>

ahora si quedemos utilizar modernizr.js como en el ejemplo pasado nos quedaría un archivo así:

gradientesmz.html

Código:

<!DOCTYPE html>
<html lang="es">
       <head>
       <script src="js/modernizr.js"></script>
       <script type="text/javascript">
	       Modernizr.load({
               test: Modernizr.cssgradients ,
   	       nope: ['js/gradientes.js'],
	       both: ['css/style.css' ]	
	       });
       </script>
       </head>
       <body>
              <div id="degradado">Gradientes para todos</div>
       </body>
</html>

Espero sea de utilidad y sirva de algo, excelente día para todos