CSS3 Gradients - Doubt over syntax in Firefox and IE

Question

CSS3 Gradients - Doubt over syntax in Firefox and IE

Navigation

#1 by (2 votes)

0

I created the CSS code below in my Web project, the goal is to leave the top menu bar with a gradient from black to transparent, Chrome works perfectly, however I do not know which syntax to use for the code to work in Firefox and 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%; 
}

I tried to change -webkit to -moz to see if it would work in Firefox but I did not succeed. I'm starting studies with CSS3, so any input is welcome. I thank the help of all.

css css3

asked by anonymous 03.11.2015 / 04:25

1 answer

I can not download a file by ActionLink mvc5 error MPDF error: Some data has already been output to browser

score 2 · Accepted Answer

The correct syntax is as follows:

.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>

Reference links: W3Schools CSS3 Gradients , Mozilla CSS linear-gradient ()
You can also use online tools as @Renan has already pointed out, to create graduations.