CODEWITHSUNDEEP
cssoperagradient
etoxin
etoxin

Reputation: 5284

How can you create a CSS3 gradient in Opera?

I can create CSS gradients in IE6/7/8/9/FF3.6+ and Chrome (see below).

My question is:

How would one create a gradient in Opera?

.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 */
        /* ??? */
}

Upvotes: 13

Views: 19032

Answers (9)

TAJPOINT
TAJPOINT

Reputation: 21

For Opera Browser

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

Upvotes: 2

cgvector
cgvector

Reputation: 929

Use this one:

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

Upvotes: 7

Paul D. Waite
Paul D. Waite

Reputation: 98866

Opera 10.x supports SVG in background images, and SVG lets you do gradients in much the same way Firefox and Safari’s CSS extensions do.

Opera’s SVG background support seems to have some nasty bugs when your element also has borders in 10.0 and below, but as of 10.5 it seems reasonably solid (in my limited experience).

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>

You can also include the SVG directly in the CSS file, using a data url, if you url encode the SVG. (In e.g. Python, you can do this by removing newlines and unnecessary spaces, and then passing the file’s contents to urllib.quote).

It’s a bit unreadable, but it saves an HTTP request, and if you’ve got more than one SVG gradient embedded in your CSS file, you should see some bandwidth savings over individual files (assuming your CSS file is 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);

Upvotes: 13

JercSi
JercSi

Reputation: 1047

On Dev.Opera has been published article how to use linear gradients on Opera (11.10+). http://dev.opera.com/articles/view/css3-linear-gradients/

Upvotes: 9

James
James

Reputation: 23

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

That is by far the best option. I tried the SVG method and not only does it look awful in the code but it also ends up causing the background to dissapear in firefox.

Thanks everyone for posting. I had to recently implement gradients in Opera as well and it was a pain.

Upvotes: 1

John
John

Reputation: 101

Should be the same as Mozilla's, but with the Opera identifier: 

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

Works in Opera 11.10 and newer.

Upvotes: 10

sabiland
sabiland

Reputation: 2614

Latest Opera builds (>=2042) supports CSS3 linear-gradient.

Upvotes: 5

David Storey
David Storey

Reputation: 30414

CSS3 Gradients, using the latest syntax (closer but not exactly the same as Firefox, as the spec has evolved) are in development now in Opera Presto (our rendering engine). It likely wont make it for Opera 11, but will probably make it for the version after.

Upvotes: 5

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263047

Opera does not support CSS3 gradients (yet). You can somehow emulate them using box-shadow, though. See http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/.

Upvotes: 4

Related Questions