[Resolvido] Degradê com CSS3 erro nos navegadores

[Marcos Coelho2 2]

Eu estou tendo um problema com o degradê dentro da div. Olhem o meu css dela

 

#degrade{
width:122px;
height:40px;
	background-image: -webkit-linear-gradient(60px -20px, #767778, #2F3842);
	background-image: -moz-linear-gradient(60px -20px, #767778, #2F3842);
	background-image: -ms-linear-gradient(60px -20px, #767778, #2F3842);
	background-image: -o-linear-gradient(60px -20px, #767778, #2F3842);

border:1px solid #888;
margin:10px auto;
padding:0px auto;
-moz-border-radius:7px;
-webkit-border-radius:7px;
-ms-border-radius:7px;
-o-border-radius:7px;
border-radius:7px 7px 0px 0px;

} 

 

a borda funcionou em todos, mas o degradê só funcionou no mozilla, nos outros navegadores que eu coloquei para aparecer(Google Chrome, Safari, Opera, Internet Explorer). Qual pode ser o problema?

 

Obrigado

[William Bruno 1501]

pode ser falta de suporte.

 

qual versão de cada navegador você está testando ?

[Marcos Coelho2 2]

pode ser falta de suporte.

 

qual versão de cada navegador você está testando ?

 

 

é a ultima versão de quase todos os navegadores, eu acabei de baixar, só o IE que é a versão 8.0

[William Bruno 1501]

teste assim:

 

 background: -webkit-linear-gradient(60px -20px, #767778, #2F3842);
               background: -moz-linear-gradient(60px -20px, #767778, #2F3842);
               background: -ms-linear-gradient(60px -20px, #767778, #2F3842);
               background: -o-linear-gradient(60px -20px, #767778, #2F3842);

[Marcos Coelho2 2]

teste assim:

 

 background: -webkit-linear-gradient(60px -20px, #767778, #2F3842);
               background: -moz-linear-gradient(60px -20px, #767778, #2F3842);
               background: -ms-linear-gradient(60px -20px, #767778, #2F3842);
               background: -o-linear-gradient(60px -20px, #767778, #2F3842);

 

 

continuou só funcionando no mozilla

[William Bruno 1501]

é cara.. parece que os outros browsers não estão implementando a definição de inicio e fim do degradê com essa sintaxe.

 

 

assim rolou aqui:

	background: -webkit-linear-gradient(#767778, #2F3842);
background: -moz-linear-gradient(#767778, #2F3842);

 

Tente usando um desses geradores que tem pela internet.

[André do Vale 76]

Qual a direção (ou radial) do degradê? E esse -20%?

 

Sugestão: http://www.colorzilla.com/gradient-editor/

[Marcos Coelho2 2]

Qual a direção (ou radial) do degradê? E esse -20%?

 

Sugestão: http://www.colorzilla.com/gradient-editor/

 

A direção é vertical. Com o site que você me passou funcionou. Só uma pergunta.. Se a versão dos navegadores forem amsi antigas, e se forem navegadores menos conhecidos, o cor que irá aparecer é a da linha /* Old browsers */? porque se sim, eu irei mudar para imagem usando hover.. Só estou com esta duvida

[André do Vale 76]

A direção é vertical. Com o site que você me passou funcionou. Só uma pergunta.. Se a versão dos navegadores forem amsi antigas, e se forem navegadores menos conhecidos, o cor que irá aparecer é a da linha /* Old browsers */? porque se sim, eu irei mudar para imagem usando hover.. Só estou com esta duvida

 

Olha cara, IE8 ou menor, essa história de fundo com gradiente (mesmo que utilizando alguma solução em JS) fica muito pesado para o navegador renderizar. É o motor do coitado, nunca ajudou.

 

Utilizar imagem é uma boa sim.

 

Eu recomendo também usar "máscara" em PNG. Você faz o degradê com transparência em tons de cinza, e aplica a cor atrás dele pelo CSS. Assim você tem uma alternativa boa e rápida de manutenção. Alguns desenvolvedores possuem tabelas (sprites, na verdade) de mascaras prontas que agiliza isso, e muito.

[Marcos Coelho2 2]

Olha cara, IE8 ou menor, essa história de fundo com gradiente (mesmo que utilizando alguma solução em JS) fica muito pesado para o navegador renderizar. É o motor do coitado, nunca ajudou.

 

Utilizar imagem é uma boa sim.

 

Eu recomendo também usar "máscara" em PNG. Você faz o degradê com transparência em tons de cinza, e aplica a cor atrás dele pelo CSS. Assim você tem uma alternativa boa e rápida de manutenção. Alguns desenvolvedores possuem tabelas (sprites, na verdade) de mascaras prontas que agiliza isso, e muito.

 

 

OK, obrigado pela ajuda gente :)