As versões 6 ,7 e 8 do Internet Explorer não são capazes de renderizar as propriedades do CSS3, mas não desanime!
Existem bibliotecas javascript e hacks que nos permite utilizar algumas propriedades CSS3 nos navegadores citados acima, tais implementações também são renderizadas nos demais navegadores: Firefox, Chrome, Opera e Safari.
Para tal, utilizaremos o PIE CSS3 http://css3pie.com
Propriedades suportadas:
border-radius
box-shadow
border-image
CSS3 Backgrounds (- pie-background)
Gradients
RGBA Color Values
PIE Custom Properties
-pie-watch-ancestors
PNG alpha transparency and -pie-png-fix
Lazy Initialization (-pie-lazy-init)
Bordas Arredondadas
A propriedade para criar bordar arredondadas é o border-radius e atribuir um valor para o arredondamento. Porém, essa propriedade varia entre browsers.
Veremos agora como utilizar na prática:
#box{
border-radius: 10px; /* Implementação padrão W3C */
-moz-border-radius: 10px; /* Implementação Firefox */
-webkit-border-radius: 10px; /* ISafari e browsers que renderizam via webkit */
behavior: url(PIE.htc); /* Bahavior adicionado para renderização das propriedades acima no IE6, 7 e 8 */
width: 200px;
height: 50px;
background: red;
}
Pronto! A borda será renderizada como na imagem abaixo (utilize o programa IE Tester para testar nas diferentes versões do IE).
Sombras
A propriedade box-shadow define sombra em um elemento. Requer valores para definir a separação da sombra, esfumaçado, cor.
Por exemplo: box-shadow: 5px -9px 8px #666, onde o primeiro valor define a posição em X, o segundo em Y, depois o valor do “blur” e por último a cor. Por enquanto o PIE CSS3 não aceita usar inset e outset para mudar a sombra para interna ou externa.
#boxsombra{
box-shadow: 5px -9px 8px #666; /* Implementação W3C */
-moz-box-shadow: 5px 3px 8px #666; /* Implementação Firefox */
-webkit-box-shadow:5px 3px 8px #666; ; /* Safari e browsers que renderizam via webkit */
behavior: url(PIE.htc); /* Bahavior adicionado para renderização das propriedades acima no IE6, 7 e 8 */
width: 200px;
height: 50px;
background: orange;
}
Linear Gradiente
Define efeito de degradê, basta inserir a propriedade dentro de background e declarar os devidos valores.
background: linear- gradient(cor1,cor2), em alguns browsers que usam webkit fica assim background: linear-gradient{posição, cor (from), cor(to) porcentagem};
#boxdegrade
{
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));/* Safari e browsers que renderizam via webkit */
background: -webkit-linear-gradient(#EEFF99, #66EE33);/* Safari e browsers que renderizam via webkit */
background: -moz-linear-gradient(#EEFF99, #66EE33); /* Implementação Firefox */
background: -o-linear-gradient(#EEFF99, #66EE33); /* Implementação Opera */
background: linear-gradient(#EEFF99, #66EE33); /* Implementação padrão W3C */
-pie-background: linear-gradient(#EEFF99, #66EE33); /* Propriedade adicionada para renderização das propriedades no IE7 ou superior */
width: 200px;
height: 50px;
behavior: url(PIE.htc); /* Behavior adicionado para renderização das propriedades acima no IE6, 7 e 8 */
}
Para mais exemplos visite o site http://css3pie.com
OBS: o arquivo PIE.htc tem que estar no mesmo diretório que o arquivo .css
