फ्लैट रंग के साथ सीएसएस ढाल का उपयोग कर पृष्ठभूमि कैसे बनाएं?

Question

लाल और पीले रंग की समान ऊंचाई के साथ इस तरह की एक बैकग्राउंड।

Answer 1

का उपयोग कर ColorZilla के gradient generator, बस दो रंग एक ही% स्थान पर सेट है और आप दो रंगों के बीच एक कठिन बढ़त मिल जाएगा।

background: #ffff00; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffff00 30%, #ffff00 30%, #fe0000 30%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffff00), color-stop(30%,#ffff00), color-stop(30%,#fe0000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#fe0000',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #ffff00 30%,#ffff00 30%,#fe0000 30%); /* W3C */ 

Answer 2

कलरज़िला के ढाल जनरेटर एक अच्छी शुरुआत है, लेकिन कोड मेरी राय में भयानक है।
आप आसानी से कभी नहीं देख पाएंगे कि रंग सही हैं या नहीं, #ff0 जैसे छोटे हेक्स कोड का कोई आउटपुट नहीं है और - ऊपर दिए गए उत्तर की तुलना में सबसे महत्वपूर्ण - डब्ल्यू 3 सी मानक to <side-or-corner> में बदल गया है।

तो साथ लाल और पीले क्षेत्र के ही ऊंचाई एक फ्लैट ढाल के बाद अपने प्रश्न दिए गए इस मेरे पसंदीदा कोड है:

background-color: #ff0; /* Old browsers */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff0), color-stop(50%, #ff0), color-stop(50%, #fe0000)); /* Chrome, Safari4+ */ 
background-image: -webkit-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Chrome10+, Safari5.1+ */  
background-image: -moz-linear-gradient(top, #ff0 50%, #ff0 50%, #fe0000 50%); /* Fx3.6+ */ 
background-image:   linear-gradient(  #ff0 50%, #ff0 50%, #fe0000 50%); /* W3C */ 

See example on CodePen।

यह भी ध्यान दें कि आप इस मामले में आईईएस के लिए filter संपत्ति को बहिष्कृत कर सकते हैं, क्योंकि केवल कोई रंग स्टॉप शामिल नहीं है।
यदि आप बॉक्स की सटीक ऊंचाई जानते हैं, तो आप रंगीन स्टॉप के लिए % मानों के बजाय px मानों के साथ भी काम कर सकते हैं।

अपडेट किया गया 2016/01/16: न तो -o- विक्रेता उपसर्ग के लिए आवश्यक है, और न ही (ढ़ाल समर्थन करने के लिए के रूप में आईई 10 पहले आईई है और यह W3C मानकों वाक्य रचना का समर्थन करता है) -ms-। http://caniuse.com/#feat=css-gradients
अपडेट किया गया 2016-01-27: lowercase hex color values for better gzipping पसंद करें, और स्पष्ट रूप से background-color और background-imagebackground के बजाय स्पष्ट रूप से बताएं। to bottom को भी हटा दिया गया क्योंकि यह डिफ़ॉल्ट मान है।