CODEWITHSUNDEEP
csscross-browser
Justin808
Justin808

Reputation: 21522

Is there a -moz-linear-gradient or a -webkit-gradient type CSS for Opera?

Is there a -moz-linear-gradient or a -webkit-gradient type CSS for Opera and other major browsers?

Upvotes: 2

Views: 2671

Answers (4)

Лев Булычёв
Лев Булычёв

Reputation: 1

for all support enable prefixs -webkit-, -moz, -ms-, -o- your code:

    background: rgb(0,255,244); /* only for old ie, opera, chrome, safari, firefox */
background-color: rgb(0,255,244); /* only for old ie */
background: url(all-ie.svg); /* only for ie 10-11 */
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjEwMCUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KLmdyYSwNCnJlY3QsDQpyZWN0LmdyYXsNCiAgICBmaWxsOiB1cmwoI2NvbCk7DQp9DQo8L3N0eWxlPg0KICA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImNvbCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNTApIj4NCiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDBmZmY0IiAvPg0KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YwMDBiYSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDwvZGVmcz4NCiAgICA8cmVjdCBjbGFzcz0iZ3JhIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDogdXJsKCNjb2wpO3dpZHRoOiAxMDAlO2hlaWdodDogMTAwJTsiIGZpbGw9InVybCgjY29sKSIgLz4NCjwvc3ZnPg==); /* base64 for ie 11 */
background: -webkit-gradient(linear, left, rgba(0,255,244,1), rgba(240,0,186,1)); /* only for all ie versions and for old webkit browsers */
background: -o-linear-gradient(323deg, rgba(0,255,244,1) 0%, rgba(240,0,186,1) 100%); /* only for old opera versions */
background: -ms-linear-gradient(323deg, rgba(0,255,244,1) 0%, rgba(240,0,186,1) 100%); /* only for ie 10 */
background: -moz-linear-gradient(323deg, rgba(0,255,244,1) 0%, rgba(240,0,186,1) 100%); /* only for old firefox version */
background: -webkit-linear-gradient(323deg, rgba(0,255,244,1) 0%, rgba(240,0,186,1) 100%); /* standard (no ie 1.0+) */
background: linear-gradient(323deg, rgba(0,255,244,1) 0%, rgba(240,0,186,1) 100%); /* only standard */
/* filter for old browsers for test ie 1.0+  */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00fff4",endColorstr="#f000ba",GradientType=1);
-webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00fff4",endColorstr="#f000ba",GradientType=1);
-moz-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00fff4",endColorstr="#f000ba",GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00fff4",endColorstr="#f000ba",GradientType=1);
-o-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00fff4",endColorstr="#f000ba",GradientType=1);
/* zoom only for ie 1.0+ */
zoom: 1;
-ms-zoom: 1;

Upvotes: 0

corymathews
corymathews

Reputation: 12619

As of Nov 6 2012 this works:

background-image: -webkit-linear-gradient(top, #585858, #2d2d2d); /*Webkit*/
background-image: linear-gradient(to bottom, #585858, #2d2d2d); /*Firefox and Opera*/
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#585858', EndColorStr='#2d2d2d'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#585858', EndColorStr='#2d2d2d')"; /* IE8 */

Upvotes: 0

Dustin Hansen
Dustin Hansen

Reputation: 622

IE Does infact have support for gradients, Opera, however does not (as of 10.5). IE only supports gradient via the filter attribute for now, maybe in v10 this will change, but for now, you must use either the filter or -ms-filter attribute.

Example:

.simple-gradient {
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
    background-image: -moz-linear-gradient(top, #000, #fff);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
}

For more more information:

General:

Gradients in Internet Explorer 9

Firefox:

https://developer.mozilla.org/en/CSS/-moz-linear-gradient

https://developer.mozilla.org/en/CSS/-moz-radial-gradient

Webkit:

http://webkit.org/blog/175/introducing-css-gradients/

Internet Explorer:

http://msdn.microsoft.com/en-us/library/ms532997%28VS.85%29.aspx

Upvotes: 2

Eric Quidenus-Wahlforss
Eric Quidenus-Wahlforss

Reputation: 31

You can use SVG images as backgrounds in opera. you can even base64 encode these and put them directly in your stylesheet. i'm currently trying to find out if the latest beta (opera 11) supports css gradients but no luck yet.

Upvotes: 0

Related Questions