0

Criei o código CSS abaixo em meu projeto Web, o objetivo é deixar a barra de menu superior com um gradiente de preto para transparente, no Chrome funciona perfeitamente, porém não sei qual sintaxe utilizar para que o código funcione no Firefox e IE.

.barra-menu{    
      background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
     -webkit-mask: -webkit-linear-gradient(black, transparent 0%, black);
     -webkit-mask: linear-gradient(black, transparent 100%, black);

     height: 18%;
     position: absolute;
     top:0%;
     width:100%; 
}      

Já tentei trocar o -webkit por -moz para ver se funcionaria no Firefox mas não obtive sucesso. Estou iniciando os estudos com CSS3, por isso qualquer contribuição é bem vinda. Desde já, agradeço a ajuda de todos.

1

1 Resposta 1

2

A sintaxe correta é a seguinte:

.barra-menu{
    background: -webkit-linear-gradient(top, transparent, rgb(0, 0, 0));  /* Para o Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, transparent, rgb(0, 0, 0));       /* Para o Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, transparent, rgb(0, 0, 0));     /* Para o Firefox 3.6 to 15 */
    background: linear-gradient(to top, transparent, rgb(0, 0, 0));       /* Sintaxe padrão */

    height: 18%;
    position: absolute;
    top:0%;
    width:100%;
}
body{margin:0;padding:0;}
<div class="barra-menu"></div>

Links de referência: W3Schools CSS3 Gradients, Mozilla CSS linear-gradient().
Podes também utilizar ferramentas online como o @Renan já apontou, para criar graduamentos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .