CSS3 Gradients - Doubt about syntax in Firefox and IE

Asked

Viewed 36 times

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, in Chrome works perfectly, but I do not know what syntax to use for 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 replace -Webkit with -Moz to see if it would work in Firefox but it was not successful. I am starting the studies with CSS3, so any contribution is welcome. I appreciate the help of all.

  • 1

    http://www.w3.org/TR/css3-images/#gradients | http://www.colorzilla.com/gradient-editor/

1 answer

2


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 pointed out, to create graduations.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.