Sfumature sfumate CSS

Question

Sto imparando come usare i gradienti CSS.

Il mio problema riguarda i gradienti dall'alto verso il basso. Puoi semplicemente vedere le "fermate" nel cambio colore.

Questo non è il mio codice CSS

#header { 
    width:1000px; 
    height:250px; 
    background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
    background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
} 

è un modo per appianare le fermate in cima a gradienti di fondo? (questo, per il mio occhio, non è molto visibile in gradienti da sinistra a destra o da destra a sinistra)

Answer 1

Think's below css soddisferà le tue esigenze.

CSS:

#header { 
    width:1000px; 
    height:250px; 
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37)); 
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%); 
} 

http://jsfiddle.net/xPLPH/

Per saperne di più su gradienti lineari: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

Answer 2

Questo è il mio strumento preferito per fare pendenze. Mi piace soprattutto che trasmetta la sintassi SASS/SCSS.

http://www.colorzilla.com/gradient-editor/