My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
CSS3 linear gradients
This article shows you how to use CSS3 linear gradients, newly supported in Opera 11.10, to add special effects to your design work.( Read the article )
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
In Figure 1 the gradient goes from left to right.
Also, linear gradients should support percentage values (e.g. -o-linear-gradient(50% 100%,black,white)). Is this likely to make it into Opera for 11.10?
Originally posted by stopsatgreen:
"In the first example, we didn't specify any kind of direction or angle, and the gradient went from the top of the block to the bottom."In Figure 1 the gradient goes from left to right.
Whoops! Wrong screenshot. Cheers for the heads up Peter. I've updated it now.
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by chrismills:
Also, linear gradients should support percentage values (e.g. -o-linear-gradient(50% 100%,black,white)). Is this likely to make it into Opera for 11.10?
I'm not sure about this - I'll ask our developers what the plans are. AFAIK, it's not supported in any browser yet?
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by stopsatgreen:
It's in Firefox, but not the new WebKit syntax.
OK, good to know.
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Is the -o-repeating-linear-gradient similarly supported by Gecko and Webkit? I haven't ever seen the repeating part listed in any tutorial I've ever seen.
Sigh, I knew I should have included a generic -o version of the CSS gradient's I've been using. I just assumed that Opera would use a prefix-less version for some reason.
At least they'll work once the need for a prefix is gone as I thought that far ahead at least.Originally posted by genelocklin:
my view of the bottom example in chrome 11.0.696.12 dev: http://cl.ly/5Jmd.
It's because webkit rule has wrong angle specified.
Originally posted by stopsatgreen:
Also, linear gradients should support percentage values (e.g. -o-linear-gradient(50% 100%,black,white)). Is this likely to make it into Opera for 11.10?
This is not supported in current spec so it won't make to Opera.
Note that can you achieve same effect by using background-position (and other background properties).
Originally posted by proghead:
I've asked the Mozilla guys, and I'm going to do it here: why not use the background-repeat rule instead of repeating-linear-gradient?
I think that repeating-linear-gradient does not bring anything that couldn't be done with background-* properties but with radial it actually makes sense because you can do things that are impossible otherwise.
Originally posted by BS-Harou:
Gradient transitions http://files.myopera.com/BS-Harou/files/gradient%20transitions.html.
You can do much more with help of javascript: http://files.myopera.com/d.i.z./files/gradient-demo.html
(but yeah, would be better to have it all in css)
Originally posted by d.i.z.:
You can do much more with help of javascript: http://files.myopera.com/d.i.z./files/gradient-demo.html(but yeah, would be better to have it all in css)
Exactly. I've just wanted to share the idea of transaprent gradeint and background-color transition
Originally posted by POWRSURG:
I thought Webkit now supported the same syntax as Gecko and now Opera do with -webkit-linear-gradient and the like (while keeping support for their old format)?Is the -o-repeating-linear-gradient similarly supported by Gecko and Webkit? I haven't ever seen the repeating part listed in any tutorial I've ever seen.Sigh, I knew I should have included a generic -o version of the CSS gradient's I've been using. I just assumed that Opera would use a prefix-less version for some reason. At least they'll work once the need for a prefix is gone as I thought that far ahead at least.
It is a weird one at the moment - Chrome definitely supports the same syntax, but Safari seems to be using a slightly older version of Webkit that stiull uses the outdated old syntax. I've been told they are using the new syntax, but the versions of Safari I tried didn't run my examples properly, even going up to 5.0.3.
Yes, the repeating-linear-gradient is supported by Gecko and Webkit (Chrome).
I think we have initially gone with a prefixed version because of the same syntax uncertainty issue.
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by genelocklin:
my view of the bottom example in chrome 11.0.696.12 dev: http://cl.ly/5Jmd.
I have asked Vadim to look into this, and update his example.
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by proghead:
I've asked the Mozilla guys, and I'm going to do it here: why not use the background-repeat rule instead of repeating-linear-gradient?
I've not got an answer for you here ;-)
I can ask the CSS WG if you are really curious!
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by d.i.z.:
You can do much more with help of javascript: http://files.myopera.com/d.i.z./files/gradient-demo.html(but yeah, would be better to have it all in css)
Nice one d.i.z - this is a cool example.
Although I'd argue still that it is still really nice for designers to be able to do simple transition work programatically, without using JS or Photoshop.
You can get really nice, easily updateable effects by setting a background colour AND an alpha gradient on the same box, something like:
background-color: rgb(40,240,40);
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.7));
then you can just alter the background colour and the whole effect changes nicely.
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
Originally posted by BS-Harou:
Gradient transitions http://files.myopera.com/BS-Harou/files/gradient%20transitions.html
This is cool as well ;-)
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
why ? isn't mathematics (trigonometry) using 0 = right ?
why the inversion ?
Originally posted by the-Arioch:
"0deg is equivalent to left."why ? isn't mathematics (trigonometry) using 0 = right ?
The left keyword makes the gradient travel from the left towards the right, so strictly speaking, this is the correct behaviour according to the math theory.
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
or maybe it would be delayed until HTML5 would decide upon unified cross-browser CSS syntax ?
https://github.com/jquery/jquery-mobile/issues/1357/
Originally posted by M2D4YH:
k first of all using .rgba is absolutely stupid from a developers point of view and you will be dropped from many developments.
RGBA is an acceptable CSS3 color value as described in the CSS3 Color Module specification: http://www.w3.org/TR/css3-color/.
Opera gradients do support the familiar color keywords and hex values. But you can also use RGBA as was done here, RGB, HSL ("hue, saturation, lightness"), or HSLA ("hue, saturation, lightness, alpha") color values.
Originally posted by M2D4YH:
secondly stick to what worked ie: background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)); ... sheesh... no wonder people are getting fed up with Opera.
The syntax of -webkit-gradient differs from the W3C spec and from the implementations in Opera and Firefox. The specification is still a working draft, but as it stands, the syntax Opera has implemented is actually closer to the spec-compliant one (same goes for Firefox).
I have some code where on hover the background gradient changes. It is working for webkit and moz, but not for the big O. The funny thing is, when I switch classes to .active class while browsing the pop up menu after hover, it will then switch to the gradient background; but as soon as you hover again it goes back to my black gradient.
Anyone else get this?
Thanks!
Originally posted by BS-Harou:
Is anyone else having trouble with this while using a pseudo-class? I have some code where on hover the background gradient changes. It is working for webkit and moz, but not for the big O. The funny thing is, when I switch classes to .active class while browsing the pop up menu after hover, it will then switch to the gradient background; but as soon as you hover again it goes back to my black gradient.Anyone else get this?
I've not experienced that - give us a test case, and I'd be more than happy to investigate it for you.
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com