दिलचस्प पोस्ट
PHP – एक सरणी से सभी चाबियाँ प्राप्त करें जो एक निश्चित स्ट्रिंग से शुरू होती हैं Java का SimpleDateFormat थ्रेड-सुरक्षित क्यों नहीं है? सी ++ 11 स्टड :: थ्रेड के साथ स्टैक्साइज़ कैसे सेट करें JSLint "असुरक्षित ^" नियमित अभिव्यक्ति में यह कैसे जांचें कि एक यूरी स्ट्रिंग मान्य है कैसे मैन्युअल आलसी एक मॉड्यूल लोड करने के लिए? क्या कोई डिवीवी नापसंद बनाने का कोई तरीका है? एंड्रॉइड में मैं एक क्षैतिज सूचीदृश्य कैसे बना सकता हूं? पायथन में अनुक्रमणिका द्वारा किसी सूची से एक तत्व को कैसे निकालना है? SQL सर्वर पाश – मैं रिकॉर्ड्स के एक सेट के माध्यम से कैसे लूप कर सकता हूँ अगर मैं अब इसे प्रयोग नहीं कर रहा हूँ तो एमकेमैपदृश्य को मुक्त करने के बाद क्यों मैं दुर्घटनाग्रस्त हूं? निचली प्लेटफ़ॉर्म संस्करणों के लिए स्टिकमोड जावा का उपयोग करके सेलेनियम वेबड्राइवर के साथ प्रमाणीकरण पॉपअप कैसे प्रबंधित करें प्रपत्रों के बीच मान गुजर रहा है (विनोफा) रूबी 1.9 मानक सीएसवी लाइब्रेरी क्या है?

इंटरनेट एक्सप्लोरर 9 में ग्रेडीन्ट्स

क्या किसी को IE9 के भीतर ग्रेडियेंट के लिए विक्रेता उपसर्ग पता है या फिर भी हम अभी भी अपने स्वामित्व फ़िल्टर का उपयोग करना चाहते हैं?

मुझे अन्य ब्राउज़रों के लिए क्या मिला है:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */ 

बोनस के रूप में किसी ने ओपेरा के विक्रेता उपसर्ग को भी जानते हो?

Solutions Collecting From Web of "इंटरनेट एक्सप्लोरर 9 में ग्रेडीन्ट्स"

आपको IE9 बीटा 1 के रूप में अपने स्वामित्व फ़िल्टर का उपयोग करने की आवश्यकता है

ऐसा लगता है कि मैं पार्टी में थोड़ा देर कर रहा हूं, लेकिन यहां कुछ शीर्ष ब्राउज़रों के लिए एक उदाहरण है:

 /* IE10 */ background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* Opera */ background-image: -o-linear-gradient(top, #444444 0%, #999999 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%); /* Proposed W3C Markup */ background-image: linear-gradient(top, #444444 0%, #999999 100%); 

स्रोत: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

नोट: इन सभी ब्राउज़र्स हेक्साडेसिमल नोटेशन के स्थान पर आरजीबी / आरजीबीए का समर्थन करते हैं।

सबसे अच्छा क्रॉस-ब्राउज़र समाधान है

 background: #fff; background: -moz-linear-gradient(#fff, #000); background: -webkit-linear-gradient(#fff, #000); background: -o-linear-gradient(#fff, #000); background: -ms-linear-gradient(#fff, #000);/*For IE10*/ background: linear-gradient(#fff, #000); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ height: 1%;/*For IE7*/ 

IE9 में वर्तमान में CSS3 के ढाल का समर्थन नहीं है। हालांकि, इसके बजाय एक एसवीजी (ऊर्ध्वाधर रैखिक) ढाल को वापस करने के लिए PHP का उपयोग करने के लिए एक अच्छा समाधान समाधान है, जो हमें हमारे स्टाइलशीट्स में हमारे डिजाइन को बनाए रखने की अनुमति देता है।

 <?php $from_stop = isset($_GET['from']) ? $_GET['from'] : '000000'; $to_stop = isset($_GET['to']) ? $_GET['to'] : '000000'; header('Content-type: image/svg+xml; charset=utf-8'); echo '<?xml version="1.0"?> '; ?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> <defs> <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/> <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/> </linearGradient> </defs> <rect width="100%" height="100%" fill="url(#linear-gradient)"/> </svg> 

बस इसे अपने सर्वर पर अपलोड करें और यूआरएल को इसी तरह कॉल करें:

 gradient.php?from=f00&to=00f 

इसका उपयोग इस तरह आपके CSS3 के ढाल के साथ किया जा सकता है:

 .my-color { background-color: #f00; background-image: url(gradient.php?from=f00&to=00f); background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f)); background-image: -webkit-linear-gradient(top, #f00, #00f); background-image: -moz-linear-gradient(top, #f00, #00f); background-image: linear-gradient(top, #f00, #00f); } 

यदि आपको आईई 9 से नीचे लक्षित करने की आवश्यकता है, तो आप अभी भी पुरानी स्वामित्व 'फिल्टर' विधि का उपयोग कर सकते हैं:

 .ie7 .my-color, .ie8 .my-color { filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff"); } 

बेशक, आप ढाल पर अधिक स्टॉप जोड़ने के लिए PHP कोड में संशोधन कर सकते हैं, या इसे अधिक परिष्कृत (रेडियल ग्रेडियेंट, पारदर्शिता आदि) बना सकते हैं लेकिन यह सरल (ऊर्ध्वाधर) रैखिक ग्रेडीयंट्स के लिए बहुत अच्छा है।

कोड जो मैं सभी ब्राउज़र ग्रेडीयंट्स के लिए उपयोग करता हूं:

 background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background: -ms-linear-gradient(#0A284B, #135887); background: -o-linear-gradient(#0A284B, #135887); background: linear-gradient(#0A284B, #135887); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); zoom: 1; 

आईई में काम करने के लिए इस तत्व के लिए hasLayout लागू करने के लिए hasLayout ऊंचाई या zoom: 1 निर्दिष्ट करने की आवश्यकता होगी।


अद्यतन करें:

आपके सभी कम उपयोगकर्ताओं के लिए यहां एक छोटा मिक्सिन (सीएसएस) संस्करण है:

 .gradient(@start, @end) { background: mix(@start, @end, 50%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")"; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -webkit-linear-gradient(@start, @end); background: -moz-linear-gradient(top, @start, @end); background: -ms-linear-gradient(@start, @end); background: -o-linear-gradient(@start, @end); background: linear-gradient(@start, @end); zoom: 1; } 

ओपेरा जल्द ही ढाल का समर्थन, साथ ही अन्य सीएसएस सुविधाओं के साथ उपलब्ध बनाने के लिए शुरू हो जाएगा।

डब्ल्यू 3 सी सीएसएस वर्किंग ग्रूप सीएसएस 2.1 के साथ भी समाप्त नहीं हुआ है, आप सभी जानते हैं, सही है? हम बहुत जल्द समाप्त होने का इरादा है CSS3 को ठीक ढंग से मॉड्यूलर किया गया है ताकि हम मॉड्यूल को पूरी कल्पना के बजाय तेज़ी से कार्यान्वयन के लिए ले जा सकें।

हर ब्राउज़र कंपनी एक अलग सॉफ़्टवेयर चक्र पद्धति, परीक्षण, और इसी तरह का उपयोग करती है। इसलिए प्रक्रिया समय लगता है।

मुझे यकीन है कि कई, कई पाठकों को अच्छी तरह से पता है कि अगर आप CSS3 में कुछ भी उपयोग कर रहे हैं, तो आप जो कर रहे हैं "प्रगतिशील वृद्धि" – सबसे अधिक समर्थन वाले ब्राउज़र का सर्वोत्तम अनुभव मिलता है। इसका दूसरा हिस्सा "सुंदर गिरावट" है जिसका अर्थ है कि अनुभव अनुमोदित होगा, लेकिन शायद सबसे अच्छा या सबसे आकर्षक नहीं है जब तक कि उस ब्राउज़र ने मॉड्यूल, या मॉड्यूल के कुछ हिस्सों को लागू नहीं किया है, जो आपके लिए क्या करना चाहते हैं।

यह बहुत ही अजीब स्थिति पैदा करता है जो कि दुर्भाग्य से सामने वाले देवों द्वारा बेहद निराश हो जाते हैं: कार्यान्वयन पर असंगत समय। तो यह दोनों पक्षों पर एक असली चुनौती है – क्या आप ब्राउज़र कंपनियों, डब्लू 3 सी, या अभी तक खराब हैं – स्वयं (अच्छाई जानता है कि हम इसे सब नहीं जानते!) हममें से जो एक ब्राउज़र कंपनी और डब्लू 3 सी समूह के लिए काम कर रहे हैं सदस्य खुद को दोष देते हैं? आप?

बिलकूल नही। यह हमेशा संतुलन का एक खेल है, और अभी तक के रूप में, हम एक उद्योग के रूप में नहीं जानते हैं कि जहां संतुलन वास्तव में है यह विकासवादी प्रौद्योगिकी में काम करने की खुशी है 🙂

मैं समझता हूं कि आईई 9 अभी भी सीएसएस ग्रेडीयंट्स का समर्थन नहीं करेगा। कौन सा शर्म की बात है, क्योंकि यह अन्य महान नई चीजों का समर्थन करता है।

हो सकता है कि आप CSS3 के पॉइ को IE के सभी संस्करणों को प्राप्त करने के तरीके के रूप में देखना चाहें, ताकि विभिन्न CSS3 विशेषताओं (ग्रेडियेंट, लेकिन सीमा-त्रिज्या और बॉक्स-छाया सहित) को कम से कम उपद्रव के साथ समर्थन किया जा सके।

मेरा मानना ​​है कि CSS3 पीई IE9 के साथ काम करती है (मैंने इसे पूर्व-रिलीज़ संस्करणों पर करने की कोशिश की है, लेकिन अभी तक वर्तमान बीटा पर नहीं)।

IE9 के बारे में निश्चित नहीं है, लेकिन ओपेरा अभी तक किसी भी ढाल का समर्थन नहीं करता है:

उस पृष्ठ पर "ढाल" की कोई घटना नहीं है

ओपेरा नहीं हैं, जो सभी ब्राउज़रों में काम कर रहे सीएसएस gradients प्राप्त करने पर रॉबर्ट Nyman द्वारा एक महान लेख है:

निश्चित नहीं है कि यदि उसे एक छवि को फॉलबैक के रूप में उपयोग करने के लिए बढ़ाया जा सकता है

संस्करण 11 के अनुसार, ओपेरा -ओ-विक्रेता उपसर्ग के साथ रैखिक ढाल का समर्थन करता है। क्रिस मिल्स ने इसके बारे में एक देव.ऑपरिया लेख लिखा: http://dev.opera.com/articles/view/css3-linear-gradients/

रेडियल ग्रेडियेंट अभी भी काम में हैं (दोनों कल्पना में और ओपेरा के भीतर)।

एक ढाल जेनरेटर का उपयोग करें – और सबकुछ सही होगा;) http://www.colorzilla.com/gradient-editor/