Já mostrei aqui no blog como usar border-radius no IE e agora mostro uma ferramenta mais completa para ultilizar os tais recursos do CSS3 no IE, este é o CSS3Pie que permite que o IE reconheça as seguintes propriedades:
- border-radius
- box-shadow
- linear-gradient as background image
Exemplo de uso:
.minhaclasse{
/*declarando as bordas arredondadas*/
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*declarando as sombra de caixas*/
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
/*declarando gradiente*/
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
/*declarando o arquivo PIE.htc para corrigir o IE*/
behavior: url(/PIE.htc);
Perceba que não há “magica” alguma para declarar o border-radius e o box-shadow, basta usa-lá normalmente, pois o behavior: url(/PIE.htc) se encarrega de fazer isso funcionar no IE. Já no background: linear-gradient tem a necessidade de incluir o -pie-background:, porém sua sintaxe de declaração é super simples assim como da propriedade “normal” ( background: linear-gradiente(<cor do topo>, <cor de baixo>)).
Há também o suporte a mais duas propriedades que são o border-image e multiple background images, mas não vou entrar em detalhes, pois o suporte ainda é parcial.
Na pasta de download vem outros arquivos além do PIE.htc, só é nescessário declarar o próprio, porém mantenha os outros arquivos na mesma pasta.
Para baixar e ver uma demostração o CSS3Pie veja o site da ferramenta.
Que beleza esse PIE! Muito melhor que o anterior que tinha uma falha grave: continuava funcionando mesmo ocultando a DIV com visibility, height, etc. Dava um bug bizarro! Arcos perdidos pela tela!!!
O PIE não chega a fazer tudo que o Mozilla faz, mas já é um excelente começo.
Estava pesquisando uma ferramenta pra isso encontrei o PIE e fiz mais uma pesquisa e encontrei seu site.. muito bom.
Atenciosamente,
Nooossa Salvou a pátria
Melhor que o ‘border-radius.htc’, pois alem de ser mais simples de implementar, tbm tem uma funcionalidade melhor com o IE8, o ‘border-radius.htc’ não funcionava as vezes!!!
Tahks so much
Comigo não funcionou no IE8, nem o border, nem o PIE, alguém pode me ajudar?
Pois é, eu podia jurar que funcionava no meu IE8, mas nos últimos testes não rodou. O único porém é que deixava pesadas as páginas. O IE9 já faz muita coisa de CS3, mas ainda tem muita gente usando o IE8, não tenho certeza se ainda vale a pena investir nisso, ou quem tem sistema velho vai assistir a um site quadrado mesmo…
Pingback: css3 para ie 6-8 « Paola Neves Wilm
Realmente funciona belezinha, vlw por compartilhar com a galera.
No ie8 aqui funcionou certinho, no ie7 nem rodou, mas pelo menos não sumiu com tudo como faz o border-radius.htc. Mas é isso aí quem estiver com o navegador desatualizado vai ver quadrado!
Ótima dica Marcelo.
boas…eu testei isso no meu site e nao funcionou gostaria o que poderia pra colocar o site a funcionar no IE….e tambem tenho um problema com um formulario nos contactos que no firefox no linux ele fica muito maior
realmente funciona, eu utilizava o ie_css.htc e algumas vezes não rolava, agora com esse ficou show de bola!
Pingback: Usando o CSS3Pie com o WordPress | Marcelo Torres
Pingback: css3 para ie 6-9 « Paola Neves Wilm
Muito bom mesmo, funcionou perfeitamente. Obrigado.
Brother, vc me salvou com o PIE. Caramba, nada dava certo. Enfim deu. Grato eparabéns pelo artigo.
Abraço
Funcionou mas a ferramenta é bastante limitada, no meu caso por exemplo necessito criar um Layout onde somente a borda superior esquerda e direita terão cantos arredondados , a propriedade ” border-top-left-radius: ” não funciona .Em fim , a ferramentea funciona mas só dá para usar em casos bem básicos mesmo.
Ahh ..Perfeito consegui !!! Realmente propriedades como “border-top-left-radius ” não funcionam mas podemos usar apenas border-radius: e especificar os parâmetros para cada canto separadamente exemplo : border-radius: 10px 10px 0px 0px; aplica cantos arredondados apenas no topo esquerdo e direito. Muito bom mesmo, salvou minha vida, vamos ver se funciona mesmo no IE6 e no IE7