चिकना सीएसएस ग्रेडियेंट

Question

मैं सीख रहा हूं कि सीएसएस ग्रेडियेंट का उपयोग कैसे करें।

मेरी समस्या शीर्ष से नीचे ग्रेडियेंट के साथ है। आप देख सकते हैं रंग बदलने में "रोकता है"।

यह वह जगह है वहाँ नीचे ढ़ाल के शीर्ष में बंद हो जाता है बाहर चिकनी के लिए एक रास्ता मेरी सीएसएस कोड

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

है? (यह, मेरी आंखों के लिए, बाएं से दाएं या दाएं से बाएं ग्रेडियेंट में बहुत दिखाई नहीं दे रहा है)

Answer 1

सीएसएस नीचे आपकी सोच को पूरा करेगा।

सीएसएस:

#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/

रेखीय ग्रेडिएंट बारे में और जानें: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

Answer 2

यह ढ़ाल बनाने के लिए मेरी पसंदीदा उपकरण है। मुझे विशेष रूप से प्यार है कि यह SASS/SCSS वाक्यविन्यास आउटपुट करता है।

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