आप ओपेरा में CSS3 ढाल कैसे बना सकते हैं?

Question

मैं आईई 6/7/8/9/एफएफ 3.6 + और क्रोम (नीचे देखें) में सीएसएस ग्रेडियेंट बना सकता हूं।

मेरा प्रश्न है:

एक ओपेरा में एक ढाल का निर्माण कैसे होगा?

.gradient{ 
     /*Mozilla Firefox 3.6*/ 
     background-image: -moz-linear-gradient(top, #dcdcdc, #c6c6c6); 

     /*Webkit aka Google Chrome*/ 
     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c6c6c6),color-stop(1, #dcdcdc)); 

     /*Internet Explorer 6,7 and 8*/ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6'); 

     /*Internet Explorer 8 only*/ 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6')"; 

     /* Opera */ 
     /* ??? */ 
} 

Answer 1

उपयोग इस एक:

background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));

Answer 2

ओपेरा does not support CSS3 के ढ़ाल (अभी तक)। हालांकि, आप उन्हें किसी भी तरह box-shadow का उपयोग करके अनुकरण कर सकते हैं। http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/ देखें।

Answer 3

ओपेरा 10.x पृष्ठभूमि छवियों में एसवीजी का समर्थन करता है, और एसवीजी आपको फ़ायरफ़ॉक्स और सफारी के सीएसएस एक्सटेंशन के समान तरीके से ग्रेडियेंट करने देता है।

ओपेरा के एसवीजी पृष्ठभूमि समर्थन में कुछ गड़बड़ होती है जब आपके तत्व में भी 10.0 और उससे नीचे की सीमाएं होती हैं, लेकिन 10.5 के रूप में यह उचित रूप से ठोस (मेरे सीमित अनुभव में) लगता है।

सीएसएस

/* Opera */ 
background-image: url(gradient.svg); 

gradient.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> 
    <defs> 
     <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%"> 
      <stop offset="0%" style="stop-color: #c6c6c6;"/> 
      <stop offset="100%" style="stop-color: #dcdcdc;"/> 
     </linearGradient> 
    </defs> 

    <rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" /> 
</svg> 

तुम भी एसवीजी सीधे सीएसएस फ़ाइल में, एक डेटा यूआरएल का उपयोग कर, यदि आप एसवीजी सांकेतिक शब्दों में बदलना यूआरएल शामिल कर सकते हैं। (उदाहरण के लिए पायथन, आप न्यूलाइन और अनावश्यक रिक्त स्थान को हटाकर और फिर फ़ाइल की सामग्री को urllib.quote पर भेजकर कर सकते हैं)।

यह थोड़ा अपठनीय है, लेकिन यह एक HTTP अनुरोध सहेजता है, और यदि आपके पास अपनी सीएसएस फ़ाइल में एम्बेडेड एक से अधिक एसवीजी ढाल है, तो आपको अलग-अलग फाइलों पर कुछ बैंडविड्थ बचत दिखाई देनी चाहिए (मान लें कि आपकी सीएसएस फ़ाइल gzipped है) ।

/* Opera */ 
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.0%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%20%23c6c6c6%3B%22/%3E%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%20%23dcdcdc%3B%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20fill%3D%22url%28%23gradient%29%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20/%3E%3C/svg%3E); 

Answer 4

CSS3 ग्रेडिएंट, नवीनतम वाक्य रचना (करीब लेकिन वास्तव में फ़ायरफ़ॉक्स के रूप में नहीं एक ही है, के रूप में कल्पना विकसित किया गया है) का उपयोग कर ओपेरा Presto (हमारे प्रतिपादन इंजन) में अब विकास में कर रहे हैं। यह संभवतः इसे ओपेरा 11 के लिए नहीं बनायेगा, लेकिन शायद इसे बाद के संस्करण के लिए बना देगा।

Answer 5

नवीनतम ओपेरा बनाता है (> = 2042) CSS3 रैखिक-ढाल का समर्थन करता है।

Answer 6

मोज़िला के रूप में ही होना चाहिए, लेकिन ओपेरा पहचानकर्ता के साथ:

ओपेरा 11.10 और नए में

-o-linear-gradient(top, #dcdcdc, #c6c6c6); 

काम करता है।

Answer 7

-o-linear-gradient (शीर्ष, #dcdcdc, # c6c6c6);

यह अब तक का सबसे अच्छा विकल्प है। मैंने एसवीजी विधि की कोशिश की और न केवल कोड में यह भयानक लग रहा है बल्कि यह पृष्ठभूमि को फ़ायरफ़ॉक्स में गायब होने के कारण भी समाप्त होता है।

पोस्ट करने के लिए सभी को धन्यवाद। मुझे हाल ही में ओपेरा में ग्रेडिएंट को भी लागू करना पड़ा और यह दर्द था।

Answer 8

Dev.Opera पर लेख प्रकाशित किया गया है कि ओपेरा (11.10+) पर रैखिक ग्रेडियेंट का उपयोग कैसे करें। http://dev.opera.com/articles/view/css3-linear-gradients/

Answer 9

ओपेरा ब्राउज़र के लिए

background-image: -o-linear-gradient(rgb(0,189,0),rgb(0,181,255));