Foros del Web » Programando para Internet » Javascript »

Degradados(gradientes) para IE y navegadores viejos

Estas en el tema de Degradados(gradientes) para IE y navegadores viejos en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/02/2012, 00:05
Avatar de alrvivas  
Fecha de Ingreso: febrero-2012
Ubicación: Sahuayo,Mich., México
Mensajes: 11
Antigüedad: 12 años, 9 meses
Puntos: 0
Información Degradados(gradientes) para IE y navegadores viejos

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
  #2 (permalink)  
Antiguo 20/02/2012, 10:45
Avatar de alrvivas  
Fecha de Ingreso: febrero-2012
Ubicación: Sahuayo,Mich., México
Mensajes: 11
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Degradados(gradientes) para IE y navegadores viejos

Perdón tengo un error en la hoja de estilos me deje llevar. deveria de ser .degradado y no #degradado

al igual me falto mandar llamar la función despues de mandar llamar la libreria con moderniz.js
deveria de quedar asi

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>
      <script>
              window.onload=function(){ 
                     gradient('degradados','#a37b50','#2b1300',0); 
              } 
</script> 
       </head>
       <body>
              <div id="degradado">Gradientes para todos</div>
       </body>
</html>
Ya era algo tarde cuando hice el tema espero no haber generado algo de confusión
  #3 (permalink)  
Antiguo 20/02/2012, 12:51
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 6 meses
Puntos: 834
Respuesta: Degradados(gradientes) para IE y navegadores viejos

Muy probablemente el script lo hayas tomado de ese post: http://www.forosdelweb.com/2950528-post10.html
  #4 (permalink)  
Antiguo 21/02/2012, 00:14
Avatar de alrvivas  
Fecha de Ingreso: febrero-2012
Ubicación: Sahuayo,Mich., México
Mensajes: 11
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Degradados(gradientes) para IE y navegadores viejos

Lo mismo XD pero no la tome de ahí, fue de otra pagina argentina que no recuerdo, gracias por mostrar otra manera de hacerlo
  #5 (permalink)  
Antiguo 21/02/2012, 10:19
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Degradados(gradientes) para IE y navegadores viejos

... porque muy probablemente la otra página argentina lo tomó de ese post.

Hola alrvivas, Panino5001.

Yo sigo sin recomendar el uso de esas librerías prefabricadas. Ya expliqué los motivos mil veces y no los voy a repetir, y tampoco voy a comentar ésta ahora.

Lo que sí me gustaría decir es que está muy bien enlazar distintos temas relacionados que estén en otros subforos. Quizá la mayor objeción es que "el post anterior" también era JavaScript. Podían haber quedado juntos, tal vez moverse para acá dejando una referencia en la lista de temas (el famoso "Movido: ..."). Pero es un detalle.

Ahora, lo que no entiendo es qué sentido tiene darle soporte a navegadores viejos. Los gradientes se usan desde Netscape —que ya no existe— y desde IE4.
Yo mismo puse varios ejemplos para lograrlos, si se quiere, solamente con HTML. Aunque la utilidad la tuvieron con CSS. Y si bien había que usar distintos métodos para cada versión, es mejor eso que dejar a un escript que haga los cambios según su criterio : porque al fin y al cabo hacen lo mismo que haríamos nosotros, pero seguro nosotros lo vamos a hacer bien, y el programa hace lo que puede.










Al final sí terminé criticando a las librerías correctoras.



Aprovecho para dejar algunos enlaces. (Ya que estoy... )

Background degradado

como hacer un fondo ajustable?

superponer dos fondos

Saludos
furoya
  #6 (permalink)  
Antiguo 22/02/2012, 18:27
Avatar de alrvivas  
Fecha de Ingreso: febrero-2012
Ubicación: Sahuayo,Mich., México
Mensajes: 11
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Degradados(gradientes) para IE y navegadores viejos

Gracias por tu aporte, sólo aclarando el “post anterior” lo puse en el foro CSS por que utiliza en su mayor parte CSS3 que JavaScript y este a la inversa.

Yo no e logrado que con solo CSS3+HTML5 se puedan ver los gradientes en IE9 si tu tienes un ejemplo me agradaría verlo encantado de saber como hacerlo.

No es tanto el dar soporte a navegadores viejos si no nuevos también que no tienen todas las características de css3 y HTML5 activas, aun hay gente a la que le pagan por dar soporte a navegadores no tan “modernos”. Lo único que se hace con este tipo de post es dar diferentes ideas o soluciones para uno como desarrollador se base o gente su propia idea de como dar una pronta y eficiente solución a su problemática.

Y creo que a los usuarios les agrada no por nada en menos de una semana entre los dos post genere mas de 3000 consultas, aunque no comenten yo sé que agradecen en sus corazones

Etiquetas: degradados, gradiente, modernizr
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:32.