Crear dos cuadros de 200px por 200px con un degradado como background, bordes redondeados y una opacidad diferente.
con el siguiente css podemos resolver el problema en los navegadores modernos:
Código :
#cuadro1, #cuadro2{
height: 200px;
width: 200px;
border: 2px solid #999;
border-radius: 5px;
background: #b5bdc8;
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
}aplicándole CSS3PIE, podemos hacer que funcione en ie7:
Código :
#cuadro1, #cuadro2{
height: 200px;
width: 200px;
border: 2px solid #999;
border-radius: 5px;
background: #b5bdc8;
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
-pie-background: linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
behavior: url(PIE.htc);
}y para la opacidad en ie7 usamos Jquery:
Código Javascript :
$('#cuadro1').css({'opacity':'0.5'});pero, ¿funcionará con bordes redondeados y degradados usando CSS3PIE?, la respuesta es si, pero con un truco. CSS3PIE para poder "dibujar" los bordes redondeados y los degradados, crea etiquetas "nuevas", donde "dibuja" los bordes redondeados y/o degradados, esta etiqueta la coloca fuera y antes de nuestro div o elemento(s).
Código HTML :
<css3-container><!--Aquí el código generado por CSS3PIE--></css3-container> <div id="cuadro"></div>
para poder darle opacidad podemos usar el siguiente código
Código Javascript :
$('ss3-container').css({'opacity':'0.5'});esto si queremos darle el mismo nivel de opacidad a todos nuestros degradados y/o bordes redondeados, de lo contrario tendremos que hacer un poco mas de uso de Jquery, el siguiente tutorial nos sirve para lograrlo (y sin tratar de hacer spam dejo el enlace) http://mundogeek.net/archivos/2010/04/21/tutorial-rapido-de-jquery/ , en la sección de Gestionando una colección jQuery, tenemos:
Código Javascript :
$('#cuadro1').[b]prev()[/b].css({'opacity':'0.5'});la función prev() busca al "hermano" anterior, es decir busca la etiqueta anterior a nuestro div en este caso y para ie7, la etiqueta es ss3-container. Sin embargo el código anterior puede no funcionar, por lo que en lugar de css usamos animate:
Código Javascript :
$('#cuadro1').prev().[b]animate[/b]({'opacity':'1'},500);en ejemplo de esto y resolviendo el problema, tenemos:
Código HTML :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Opacidad</title>
<style type="text/css">
#cuadro1, #cuadro2{
height: 200px;
width: 200px;
border: 2px solid #999;
border-radius: 5px;
background: #b5bdc8;
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
-pie-background: linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
behavior: url(PIE.htc);
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Detectamos si es menor a ie9
if($.browser.msie && $.browser.version < 9){
//Le aplicamos opacidad a objetos en ie7, le damos un tiempo a cargar los elementos
$('#cuadro1').prev().animate({'opacity':'0.7'},10);
$('#cuadro2').prev().animate({'opacity':'0.2'},10);
}
//Aplicamos opacidad, funciona con los navegadores modernos
$('#cuadro1').css({'opacity':'0.7'});
$('#cuadro2').css({'opacity':'0.2'});
});
</script>
</head>
<body>
<div id="cuadro1"></div>
<div id="cuadro2"></div>
</body>
</html>un ejemplo con animaciones:
Código HTML :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Opacidad</title>
<style type="text/css">
#cuadro1, #cuadro2{
height: 200px;
width: 200px;
border: 2px solid #999;
border-radius: 5px;
background: #b5bdc8;
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
-pie-background: linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
behavior: url(PIE.htc);
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var esIE7 = false;
//Detectamos si es menor a ie9
if($.browser.msie && $.browser.version < 9){
esIE7 = true;
}
//Animación
function cuadroAni(){
//Para ie7
if(esIE7 == true){$('#cuadro1').prev().animate({'opacity':'0.7'},500);}
//Opacidad a cuadro 1
$('#cuadro1').animate({'opacity':'0.7'},500,function(){
//Para ie7
if(esIE7 == true){$('#cuadro2').prev().animate({'opacity':'0.2'},500);}
//Opacidad a cuadro 2
$('#cuadro2').animate({'opacity':'0.2'},500,function(){
//Para ie7
if(esIE7 == true){$('#cuadro2').prev().animate({'opacity':'1'},500);}
//Regresamos el valor de inicio a cuadro 2
$('#cuadro2').animate({'opacity':'1'},500,function(){
//Para ie7
if(esIE7 == true){$('#cuadro1').prev().animate({'opacity':'1'},500);}
//Regresamos el valor de inicio a cuadro 1
$('#cuadro1').animate({'opacity':'1'},500,function(){
//Reiniciamos animación
cuadroAni();
})
})
})
})
}
//corremos animación
cuadroAni();
});
</script>
</head>
<body>
<div id="cuadro1"></div>
<div id="cuadro2"></div>
</body>
</html>
Espero que les sirva para poder lidiar menos con ie
Saludos!
