Wie können Sie einen CSS3-Farbverlauf in Opera erstellen?

Question

Ich kann CSS-Verläufe in IE6/7/8/9/FF3.6 + und Chrome (siehe unten) erstellen.

Meine Frage ist:

Wie würde man einen Gradienten in Opera ist?

.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

verwenden ein:

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

Answer 2

Opera does not support CSS3-Gradienten (noch) nicht. Sie können sie jedoch unter Verwendung von box-shadow irgendwie emulieren. Siehe http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/.

Answer 3

Opera 10.x unterstützt SVG in Hintergrundbildern, und mit SVG können Sie Verläufe ähnlich wie Firefox und Safari CSS-Erweiterungen vornehmen.

Operas SVG-Hintergrund-Unterstützung scheint einige unangenehme Bugs zu haben, wenn Ihr Element auch Grenzen in 10.0 und darunter hat, aber ab 10.5 scheint es einigermaßen solide (in meiner begrenzten Erfahrung).

CSS

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

Sie können auch die SVG direkt in der CSS-Datei, eine Daten URL verwenden, wenn Sie die SVG-URL Encodieren. (In Python können Sie z. B. Zeilenumbrüche und unnötige Leerzeichen entfernen und dann den Inhalt der Datei an urllib.quote übergeben).

Es ist ein wenig unlesbar, aber es speichert eine HTTP-Anfrage, und wenn Sie mehr als einen SVG-Gradienten in Ihre CSS-Datei eingebettet haben, sollten Sie etwas Bandbreite gegenüber einzelnen Dateien sparen (vorausgesetzt, Ihre CSS-Datei ist gezippt) .

/* 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 Gradients, die neueste Syntax (näher, aber nicht genau das gleiche wie Firefox, wie die Spezifikation entwickelt hat) sind in der Entwicklung jetzt in Opera Presto (unsere Rendering-Engine). Es wird wahrscheinlich nicht für Opera 11, aber wahrscheinlich wird es für die Version nach.

Answer 5

Neueste Opera-Builds (> = 2042) unterstützen CSS3 linear-gradient.

Answer 6

Sollte die gleiche wie Mozilla, aber mit der Opera-Kennung:

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

Arbeiten in Opera 11.10 und neuer.

Answer 7

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

Das ist bei weitem die beste Option. Ich habe versucht, die SVG-Methode und nicht nur sieht es schrecklich im Code, aber es endet auch verursacht den Hintergrund in Firefox verschwinden.

Vielen Dank für die Veröffentlichung. Ich musste kürzlich auch Gradienten in Opera implementieren und es war ein Schmerz.

Answer 8

Auf Dev.Opera wurde Artikel zur Verwendung linearer Gradienten auf Opera (11.10+) veröffentlicht. http://dev.opera.com/articles/view/css3-linear-gradients/

Answer 9

Für Opera Browser

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