How to use CSS3 gradients in Opera Browser

[Ben Stones]

Because CSS3 is not an official standard yet, different browsers have different properties that you need to use in order to set CSS3 gradients in each respective browser. Note however that gradients only work in newer versions of Opera, Firefox and WebKit-based browsers such as Google Chrome and Safari. For Internet Explorer, it requires separate confusing code. That said, this tutorial is specifically for Opera:

background-image: -o-linear-gradient(top,rgb(184,211,229),rgb(148,197,231));

Unfortunately, from my research you cannot set a gradient using hex codes, so you'll have to use rgb values. Don't worry if you have hex codes that you intended to use, simply use this hex to rgb converter script: Hex-to-RGB Color Converter.

More information about CSS3

[DavidAllen]

Hi Ben
I've just done a site for a client using a lot of CSS3 (border-radius and linear-gradients particularly) - have a look and see what you think (Pink Web Shop, Your One Stop Shop)
In order to get it to look good in Internet Explorer I used a wonderful thing called CSS3Pie which makes it all work for IE.

So the CSS for it looks like

	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f8689b), to(#D9014D));
	background: -moz-linear-gradient(#f8689b, #D9014D);
	background: linear-gradient(#f8689b, #D9014D);
	-pie-background: linear-gradient(#f8689b, #D9014D);

Hope this helps someone

[Ben Stones]

Hi Ben
I've just done a site for a client using a lot of CSS3 (border-radius and linear-gradients particularly) - have a look and see what you think (Pink Web Shop, Your One Stop Shop)
In order to get it to look good in Internet Explorer I used a wonderful thing called CSS3Pie which makes it all work for IE.

So the CSS for it looks like

	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f8689b), to(#D9014D));
	background: -moz-linear-gradient(#f8689b, #D9014D);
	background: linear-gradient(#f8689b, #D9014D);
	-pie-background: linear-gradient(#f8689b, #D9014D);

Hope this helps someone

Thanks for posting that David . Shame when you use CSS3 you have to use JavaScript for IE8 and IE7. People that use other browsers probably have it updated to be honest.